cn-react-search-box
Version:
Easy react search box component
135 lines (115 loc) • 3.9 kB
Markdown
<p align="center">
<img alt="react" src="https://icons-for-free.com/iconfiles/png/512/design+development+facebook+framework+mobile+react+icon-1320165723839064798.png" width="120" />
</p>
<h1 align="center">
CN React Search Box
</h1>
[](https://circleci.com/gh/C4co/cn-react-search-box)
[](https://coveralls.io/github/C4co/cn-react-search-box?branch=master)
[](https://codeclimate.com/github/C4co/cn-react-search-box/maintainability)
Easy react search box autcomplete component.
### Install
```
yarn add cn-react-search-box
```
### Usage
Example:
```jsx
import React, {Fragment} from "react"
import Search from "cn-react-searchbox"
import styled from "styled-components"
export const Example = () => {
const data = [
{name: "Adriana C. Ocampo Uria"},
{name: "Albert Einstein"},
{name: "Anna K. Behrensmeyer"},
{name: "Blaise Pascal"},
{name: "Caroline Herschel"},
{name: "Cecilia Payne-Gaposchkin"},
{name: "Chien-Shiung Wu"},
{name: "Dorothy Hodgkin"},
{name: "Edmond Halley"},
{name: "Edwin Powell Hubble"},
{name: "Elizabeth Blackburn"},
{name: "Enrico Fermi"},
{name: "Erwin Schroedinger"},
{name: "Flossie Wong-Staal"},
{name: "Frieda Robscheit-Robbins"},
{name: "Geraldine Seydoux"},
{name: "Gertrude B. Elion"},
{name: "Ingrid Daubechies"},
{name: "Jacqueline K. Barton"},
{name: "Jane Goodall"},
{name: "Jocelyn Bell Burnell"},
{name: "Johannes Kepler"},
{name: "Lene Vestergaard Hau"},
{name: "Lise Meitner"},
{name: "Lord Kelvin"},
{name: "Maria Mitchell"},
{name: "Marie Curie"},
{name: "Max Born"},
{name: "Max Planck"},
{name: "Melissa Franklin"},
{name: "Michael Faraday"},
{name: "Mildred S. Dresselhaus"},
{name: "Nicolaus Copernicus"},
{name: "Niels Bohr"},
{name: "Patricia S. Goldman-Rakic"},
{name: "Patty Jo Watson"},
{name: "Polly Matzinger"},
{name: "Richard Phillips Feynman"},
{name: "Rita Levi-Montalcini"},
{name: "Rosalind Franklin"},
{name: "Ruzena Bajcsy"},
{name: "Sarah Boysen"},
{name: "Shannon W. Lucid"},
{name: "Shirley Ann Jackson"},
{name: "Sir Ernest Rutherford"},
{name: "Sir Isaac Newton"},
{name: "Stephen Hawking"},
{name: "Werner Karl Heisenberg"},
{name: "Wilhelm Conrad Roentgen"},
{name: "Wolfgang Ernst Pauli"}
]
const Wrapper = styled.section`
.cn-searchbox__container{}
.cn-searchbox__input{}
.cn-searchbox__results{}
.cn-searchbox__item{}
.cn-searchbox__item-selected{}
`
function onCompleteHandle(item){
console.log(item)
}
return (
<Wrapper>
<Search
onComplete={onCompleteHandle}
placeholder="Seach a scientist"
data={data}
searchKey={"name"}
itemLimit={10}
/>
</Wrapper>
)
}
```
### Properites
| Property | Type | Default | Description |
|-----------------------|------------------|---------|--------------------------------------|
| onComplete | function(item) | null | search complete event handler |
| data | array\[objects\] | \[\] | data to be filtered |
| limit | integer | 10 | limit of results to will be rendered |
| searchKey | string | "" | key that will be used in filter\. |
### Development
test
```
yarn test
```
build
```
yarn build
```
### License
MIT © [C4co](https://github.com/C4co)