chakra-ui-search v1.1.1

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.