Pikas UI

@pikas-ui/searchbar

This package contains a searchbar component that can be used to create a searchbar.

This library is based on Radix Ui.

Change Log

To use this package, you must install the @pikas-ui/styles package.

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/searchbar

yarn add @pikas-ui/searchbar

pnpm add @pikas-ui/searchbar

The searchbar component is used to create a searchbar.

import { Searchbar } from '@pikas-ui/searchbar';

const Example: React.FC = () => {
  return <Searchbar />;
};

Prop	Description	Type	Default
`css`	The css of the button.	`SearchbarCSS`	-
`searchFunction`	The function to call when the search is performed.	`(value: string) => Promise<T>`	-
`onSearch`	The function to call when the search is performed.	`(value: T) => ResultItem[] or null`	-
`searchType`	The type of the searchbar.	`"button", "textfield"`	`"button"`
`isOpen`	The state of the searchbar.	`boolean`	`false`
`id`	The id of the searchbar.	`string`	`"searchbar"`
`searchWhenKeyUp`	The state of the searchbar.	`boolean`	`false`
`debounceDelay`	The delay of the searchbar.	`number`	`500`
`textfield`	The props of the textfield.	`TextfieldProps`	-
`noResult`	The message when no result is found.	`ReactNode`	`"No result"`
`loading`	The message when the search is loading.	`ReactNode`	-
`direction`	The direction of the searchbar.	`SearchbarDirection`	-
`width`	The width of the searchbar.	`string or number`	`"100%"`
`maxWidth`	The max width of the searchbar.	`string or number`	`"100%"`
`minWidth`	The min width of the searchbar.	`string or number`	-
`openOnFocus`	Set to `true` to open the searchbar on focus.	`boolean`	`false`

This documentation can be edited on GitHub here