Implementing username search recommendation in your Farcaster app

Show good recommendations when users search for Farcaster users in your app

Suggest Edits

If you have a Farcaster React app, chances are your users will want to search for other users. This guide demonstrates how to implement user search recommendations in your Farcaster React app with the Neynar SDK.

Check out this Getting started guide to learn how to set up your environment and get an API key.

Here's what the username search recommendation looks like:

We'll see the entire React component, and we'll dissect it afterwards.

import { NeynarAPIClient } from "@neynar/nodejs-sdk";

// make sure to set your NEYNAR_API_KEY .env
// don't have an API key yet? get one at neynar.com
const client = new NeynarAPIClient(process.env.NEYNAR_API_KEY);

import { useState, useEffect } from "react";

const App = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await client.searchUser(searchTerm, 3);
        setUsers(data.result.users);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };

    if (searchTerm.length > 0) {
      // to prevent searching with an empty string
      fetchUsers();
    }
  }, [searchTerm]); // This will trigger the useEffect when searchTerm changes

  return (
    <div>
      <input
        type="text"
        placeholder="Search for users..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul>
        {users.map((user) => (
          <li key={user.fid}>
            {user.username} - {user.display_name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Alright, now that we've seen the React component, time to go through it slowly.

We're using the useState hook to keep track of the search term and the users we get back from the API.

const [searchTerm, setSearchTerm] = useState("");
const [users, setUsers] = useState([]);

We're using the useEffect hook to fetch the users when the search term changes. The API reference can be found here.

useEffect(() => {
  const fetchUsers = async () => {
    try {
      const data = await client.searchUser(searchTerm, 3);
      setUsers(data.result.users);
    } catch (error) {
      console.error("Error fetching users:", error);
    }
  };

  if (searchTerm.length > 0) {
    // to prevent searching with an empty string
    fetchUsers();
  }
}, [searchTerm]); // This will trigger the useEffect when searchTerm changes

This input field listens to changes and updates the search term accordingly, thus triggering the useEffect hook.

<input
  type="text"
  placeholder="Search for users..."
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)}
/>

We're using the map function to iterate over the users and display them in a list. This list will be updated when the users state changes, which happens after the API call, which happens when the search term changes.

<ul>
  {users.map((user) => (
    <li key={user.fid}>
      {user.username} - {user.display_name}
    </li>
  ))}
</ul>

That's it, you can now implement user search recommendations inside your Farcaster app!

🚀

Ready to start building?

Get your subscription at neynar.com and reach out to us on Telegram with any questions!

Updated 3 months ago