readme.md

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.
• inputBoxBackgroundColor - Background color 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
• Fuse - Lightweight fuzzy-search library. Zero dependencies.
• styled components - Visual primitives for the component age.

License

MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.