Cn-react-search-box NPM

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.