0.0.1 • Published 5 years ago
@c4co/react-search-box v0.0.1
Easy react search box autcomplete components .
Install
yarn add @c4co/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
Property | Type | Default | Description |
---|---|---|---|
InputComponent | react component | null | input element |
WrapperComponent | react component | null | element to wrapper results |
ItemComponent | react component | null | result element |
data | array[objects] | [] | data to be filtered |
limit | integer | 10 | limit of results to will be rendered |
searchKey | string | name | key that will be used in filter. |
Development
run
yarn storybook
test
yarn test
build
yarn build
Carlos Costa | 2019
0.0.1
5 years ago