Published on

October 17, 2021

An auto-complete search box for React

An auto-complete search box 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

PropDescription
placeholderThe placeholder text for the input box
dataAn array of objects which acts as the source of data for the dropdown. This prop is required
fuseConfigsConfigs to override default Fuse configs
autoFocusFocus on the input box once the component is mounted
onSelectA function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked
onFocusA function which acts as a callback when the input is focussed
onChangeA function which acts as a callback when the input value is changed
inputBoxFontColorColor of the text in the input box
inputBoxBorderColorColor of the border of the input box
inputBoxFontSizeSize of the font of the input box
inputBoxHeightHeight of the input box
inputBoxBackgroundColorBackground color of the input box
dropDownHoverColorBackground color on hover of the dropdown list items
dropDownBorderColorBorder color of the dropdown

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.

This post was updated on

June 23, 2023.