CN React Search Box

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