releaf / react-search-box

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

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.