CN React Search Box

!GitHub

Easy react search box autcomplete component.

$3

``
yarn add cn-react-search-box
`

$3

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 (

onComplete={onCompleteHandle}
placeholder="Seach a scientist"
data={data}
searchKey={"name"}
itemLimit={10}
/>

)
}
`

$3

| 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\. |

$3

test
`
yarn test
`

build
`
yarn build
``

$3

MIT © C4co