@r3act/search-box v0.0.2

Easy react search box autcomplete components .

Install

  yarn add @c4/react-search-box

Usage

Example:

  const data = [
    {name: "foo"},
    {name: "fuzz"},
    {name: "fixx"},
    {name: "bar"},
    {name: "beer"},
    {name: "blast"},
    {name: "span"},
    {name: "spazz"},
    {name: "spec"},
  ]

  // InputComponent
  function Input(props){
    return (
      <input {...props} />
    )
  }

  // Wrapper Component
  function Wrapper({children}){
    return(
      <section>
        {children}
      </section>
    )
  }

  // Item Component
  function Item(item){
    return(
      <div id="c4-searchbox-item">
        {item.name}
      </div>
    )
  }

  <Search
    InputComponent={Input}
    WrapperComponent={Wrapper}
    ItemComponent={Item}
    data={data}
    limit={10}
    searchKey={"name"}
  />

Properites

Development

run

  yarn storybook

test

  yarn test

build

  yarn build

Carlos Costa | 2019