ghoshnirmalya / react-search-box

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

Installation

# npm
npm i react-search-box --save

# yarn
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

Prop	Description
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
clearOnSelect	Clear the input value when any record is selected
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
inputFontColor	Color of the text in the input box
inputBorderColor	Color of the border of the input box
inputFontSize	Size of the font of the input box
inputHeight	Height of the input box
inputBackgroundColor	Background color of the input box
dropDownHoverColor	Background color on hover of the dropdown list items
dropDownBorderColor	Border color of the dropdown
leftIcon	Icon to be rendered on the left of the input box
iconBoxSize	The size of the icon (based on the leftIcon prop)
type	The type of the input

Built With

• React - A JavaScript library for building user interfaces
• Fuse - Lightweight fuzzy-search library. Zero dependencies.
• Styled components - Visual primitives for the component age.

License

MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.