npmLatest version 2.1.2

Highly-customizable search palette component for React.

Good lookin' & customizable. Autocomplete, search previews & more. Set search function to find exact and/or fuzzy matches.

searchpal dark preview
searchpal mobile preview

General Demo

Basic, out-of-box demo with minimal customizations. Copy & paste the sample code to see just how easy it is to get started with searchpal.

Learn more 
1
import { Search, Option, Detail } from "searchpal";
2


3
const UsersSearch = ({ users, session }) => {
4
  const [open, setOpen] = useState(false);
5


6
  return (
7
    <>
8
      <button onClick={() => setOpen(true)}>Search for a user</button>
9
      <Search
10
        label="Search for a user..."
11
        open={open}
12
        onClose={() => setOpen(false)}
13
      >
14
        {users.map((user) => (
15
          <Option
16
            label={user.name}
17
            sublabel={user.email}
18
            img={{ src: user.avatar }}
19
            keywords={(getKeywords) =>
20
              getKeywords(
21
                user.email,
22
                user.organizations && user.organizations.map((org) => org.name)
23
              )
24
            }
25
            onClick={() => window.alert(["Selected", user.name].join(" "))}
26
            key={user.id}
27
          >
28
            <Detail label="Joined" value={user.joined} />
29
            {user.organizations.length && (
30
              <Detail
31
                label="Organizations"
32
                value={<Organizations items={user.organizations} />}
33
              />
34
            )}
35
          </Option>
36
        ))}
37
      </Search>
38
    </>
39
  );
40
};
More coming soon...