/react-search-box

:mag: An autocomplete search box built with and for React

Primary LanguageJavaScript

react search box

Greenkeeper Build Status downloads MIT License PRs Welcome

Installation

npm i react-search-box --save

If you prefer to use yarn, you can do:

yarn add react-search-box

Usage

import React, { Component } from 'react'
import ReactSearchBox from 'react-search-box'

export default class App extends Component {
  data = [
    {
      key: 'john',
      value: 'John Doe',
    },
    {
      key: 'jane',
      value: 'Jane Doe',
    },
    {
      key: 'mary',
      value: 'Mary Phillips',
    },
    {
      key: 'robert',
      value: 'Robert',
    },
    {
      key: 'karius',
      value: 'Karius',
    },
  ]

  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={record => console.log(record)}
      />
    )
  }
}

Props

  • placeholder - The placeholder text for the input box.
  • data - An array of objects which acts as the source of data for the dropdown. This prop is required.
  • fuseConfigs - Configs to override default Fuse configs.
  • autoFocus - Focus on the input box once the component is mounted.
  • onSelect - A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked.
  • onFocus - A function which acts as a callback when the input is focussed.
  • onChange - A function which acts as a callback when the input value is changed.
  • inputBoxFontColor - Color of the text in the input box.
  • inputBoxBorderColor - Color of the border of the input box.
  • inputBoxFontSize - Size of the font of the input box.
  • inputBoxHeight - Height of the input box.
  • dropDownHoverColor - Background color on hover of the dropdown list items.
  • dropDownBorderColor - Border color of the dropdown.

Built With

  • React - A JavaScript library for building user interfaces
  • Jest - Delightful JavaScript Testing
  • react-testing-library - Simple and complete React DOM testing utilities that encourage good testing practices.
  • Fuse - Lightweight fuzzy-search library. Zero dependencies.
  • styled components - Visual primitives for the component age.

License

MIT Licensed. Copyright (c) Nirmalya Ghosh 2019.