useSearch

useSearch hook provides a simple way to search through different types of data.

Import

import { useSearch } from "@prismane/core/hooks";

Usage

function Demo() {
  const { query, setQuery, filtered } = useSearch([
    "apple",
    "banana",
    "cherry",
    "date",
    "fig",
  ]);

  return (
    <Flex direction="column" gap={fr(4)} w={fr(96)}>
      <TextField
        placeholder="Search..."
        value={query}
        onChange={(e: any) => setQuery(e.target.value)}
      />
      <List>
        {filtered.map((item, index) => (
          <List.Item key={index}>{item}</List.Item>
        ))}
      </List>
    </Flex>
  );
}

API

Parameters

Name	Type	Description	Default
`intialData`	`any[]`	The data that will be searched.	-

Return Value

Name	Type	Description
`query`	`string`	The query that is searched through the data.
`setQuery`	`(query: string) => void`	The function that sets the new query by which the hook will search.
`filtered`	`any[]`	The searched data.

Go BackuseScroll

Up NextuseSorting