diff --git a/.github/workflows/release-please.yaml b/.github/workflows/release-please.yaml
deleted file mode 100644
index dc17aa4..0000000
--- a/.github/workflows/release-please.yaml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: Release Please
-
-on:
- push:
- branches:
- - main
-
-jobs:
- release:
- runs-on: ubuntu-latest
- steps:
- - name: Checkout code
- uses: actions/checkout@v3
-
- - name: Setup Node.js
- uses: actions/setup-node@v3
- with:
- node-version: '20'
-
- - name: Release Please
- id: release
- uses: google-github-actions/release-please-action@v3
- with:
- release-type: node
- package-name: "@neynar/react"
- token: ${{ secrets.GITHUB_TOKEN }}
-
- - name: Publish to npm
- if: steps.release.outputs.releases_created != 'true'
- run: |
- npm install
- npm publish
- env:
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
\ No newline at end of file
diff --git a/README.md b/README.md
index 085df0c..cb63241 100644
--- a/README.md
+++ b/README.md
@@ -90,6 +90,35 @@ import { NeynarProfileCard } from "@neynar/react";
viewerFid={1}
/>
```
+### ``
+This component is a dropdown to search for Farcaster users.
+
+Params:
+- `value` (string): The currently selected user value.
+- `onChange` (function): Callback function called with the new value when the user selection changes.
+- `style?` (CSSProperties): Custom styles for the dropdown. Default: undefined.
+- `placeholder?` (string): Placeholder text to display in the dropdown. Default: undefined.
+- `disabled?` (boolean): Boolean indicating whether the dropdown is disabled. Default: false.
+- `viewerFid?` (number): The FID of the viewer. Default: undefined.
+- `customStyles?` (object): Custom styles for various elements within the dropdown. Properties include:
+ - `dropdown?` (CSSProperties): Styles for the dropdown container.
+ - `listItem?` (CSSProperties): Styles for the individual list items.
+ - `avatar?` (CSSProperties): Styles for the user's avatar.
+ - `userInfo?` (CSSProperties): Styles for the user's information text.
+- `limit?` (number | null): The number of users that can be selected, or null for no limit. Default: null.
+
+Usage:
+```tsx
+import { NeynarUserDropdown } from "@neynar/react";
+
+ console.log(newValue)}
+ viewerFid={1}
+ limit={5}
+/>
+```
+
### ``
This component displays a specific cast (post) on Farcaster.
diff --git a/package.json b/package.json
index 51b01a8..9f6de7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@neynar/react",
- "version": "0.9.3",
+ "version": "0.9.4",
"description": "Farcaster frontend component library powered by Neynar",
"main": "dist/bundle.cjs.js",
"module": "dist/bundle.es.js",
diff --git a/src/components/organisms/NeynarUserDropdown/index.tsx b/src/components/organisms/NeynarUserDropdown/index.tsx
index f4dddda..3a17b7f 100644
--- a/src/components/organisms/NeynarUserDropdown/index.tsx
+++ b/src/components/organisms/NeynarUserDropdown/index.tsx
@@ -13,18 +13,19 @@ interface User {
}
export interface NeynarUserDropdownProps {
- value: string;
- onChange: (value: string) => void;
- style?: React.CSSProperties;
- placeholder?: string;
- disabled?: boolean;
- viewerFid?: number;
- customStyles?: {
- dropdown?: React.CSSProperties;
- listItem?: React.CSSProperties;
- avatar?: React.CSSProperties;
- userInfo?: React.CSSProperties;
- };
+ value: string;
+ onChange: (value: string) => void;
+ style?: React.CSSProperties;
+ placeholder?: string;
+ disabled?: boolean;
+ viewerFid?: number;
+ customStyles?: {
+ dropdown?: React.CSSProperties;
+ listItem?: React.CSSProperties;
+ avatar?: React.CSSProperties;
+ userInfo?: React.CSSProperties;
+ };
+ limit?: number | null; // Number of users that can be selected, or null for no limit
}
const Container = styled.div(() => ({
@@ -39,19 +40,21 @@ const Input = styled.input(() => ({
async function fetchUsersByQuery({
q,
viewerFid,
- client_id
+ client_id,
}: {
q: string;
viewerFid?: number;
client_id: string;
}): Promise {
try {
- let requestUrl = `${NEYNAR_API_URL}/v2/farcaster/user/search?q=${q}&limit=5${viewerFid ? `&viewer_fid=${viewerFid}` : ''}&client_id=${client_id}`;
+ let requestUrl = `${NEYNAR_API_URL}/v2/farcaster/user/search?q=${q}&limit=5${
+ viewerFid ? `&viewer_fid=${viewerFid}` : ''
+ }&client_id=${client_id}`;
const response = await customFetch(requestUrl);
const data = await response.json();
return data?.result?.users || [];
} catch (error) {
- console.log("Error fetching users by query", error);
+ console.log('Error fetching users by query', error);
return null;
}
}
@@ -63,7 +66,8 @@ export const NeynarUserDropdown: React.FC = ({
placeholder = 'Enter FIDs or usernames',
disabled = false,
viewerFid,
-customStyles = {},
+ customStyles = {},
+ limit = null,
}) => {
const { client_id } = useNeynarContext();
const [currentValue, setCurrentValue] = useState('');
@@ -73,7 +77,7 @@ customStyles = {},
useEffect(() => {
const values = value?.split(',') || [];
- if (!values[values.length -1]) {
+ if (!values[values.length - 1]) {
setCurrentValue('');
return;
}
@@ -90,7 +94,11 @@ customStyles = {},
}, [currentValue]);
const fetchUsers = async (query: string) => {
- const fetchedUsers = await fetchUsersByQuery({ q: query, viewerFid, client_id });
+ const fetchedUsers = await fetchUsersByQuery({
+ q: query,
+ viewerFid,
+ client_id,
+ });
if (fetchedUsers) {
setUsers(fetchedUsers);
setShowDropdown(true);
@@ -104,7 +112,13 @@ customStyles = {},
const handleUserSelect = (user: User) => {
let values = value.split(',');
- values[values.length - 1] = user.fid.toString();
+
+ if (limit !== null && values.length >= limit) {
+ values[values.length - 1] = user.fid.toString();
+ } else {
+ values.push(user.fid.toString());
+ }
+
const newValue = values.join(',');
onChange(newValue);
setCurrentValue('');
@@ -144,4 +158,4 @@ customStyles = {},
);
};
-export default NeynarUserDropdown;
\ No newline at end of file
+export default NeynarUserDropdown;