cn-react-search-box
v0.0.5
Published
Easy react search box component
Downloads
18
Readme
Easy react search box autcomplete component.
Install
yarn add cn-react-search-box
Usage
Example:
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