chakra-ui-search

This is a simple search component for Chakra UI inspired in Semantic UI Search.

Installation

Yarn:

yarn add chakra-ui-search

NPM:

npm i chakra-ui-search

Basic Usage Example

import { Search } from 'chakra-ui-search'

export const SearchExample = () => {

  // Some logic...

  return (
    <Search
      placeholder="Search book..."
      value={ value }
      isLoading={ isLoading }
      input={ { iconPosition: 'left' } }
      onSearchChange={ onValueChange }
      searchResults={ results }
      resultRenderer={ book => <SearchResult book={ book } /> }
      onResultSelect={ handleResultSelect }
    />
  )

}

Props

Note: The Search component extend the Chakra UI Box component so they accept all the default styling props.

Prop	Type	Required	Description	Default
value	string	yes	Input value	undefined
isLoading	boolean	yes	Is loading results	undefined
onSearchChange	( event: React.ChangeEvent ) => void	yes	Action to execute when changing the input value	undefined
resultRenderer	( result: any ) => JSX.Element	yes	Element that will be rendered to display the result	undefined
onResultSelect	( result: any ) => void	yes	Action to execute when selecting a result	undefined
searchResults	any[]	no	Array of search results, Each item needs to have at least one id, _id or key property	[]
placeholder	string	no	Input placeholder	''
input	{ iconPosition: 'left' | 'right'; }	no	Input configuration, for now you can only change its position	{ iconPosition = 'left' }
noResultFoundText	string	no	Text displayed when there are no results	'No results found.'
resultListMaxHeight	string	no	Max Height of the results list	'60vh'