Merge pull request #37 from neynarxyz/kevin/neyn-2996-add-limit-to-us…

…er-dropdown

add a limit prop to the dropdown

README.md

@@ -90,6 +90,35 @@ import { NeynarProfileCard } from "@neynar/react";
   viewerFid={1} 
 />
 ```
+### `<NeynarUserDropdown />`
+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";
+
+<NeynarUserDropdown 
+  value="rish" 
+  onChange={(newValue) => console.log(newValue)} 
+  viewerFid={1}
+  limit={5}
+/>
+```
+
 
 ### `<NeynarCastCard />`
 This component displays a specific cast (post) on Farcaster.

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",

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<User[] | null> {
   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<NeynarUserDropdownProps> = ({
   placeholder = 'Enter FIDs or usernames',
   disabled = false,
   viewerFid,
-customStyles = {},
+  customStyles = {},
+  limit = null,
 }) => {
   const { client_id } = useNeynarContext();
   const [currentValue, setCurrentValue] = useState<string>('');
@@ -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;
+export default NeynarUserDropdown;