react-search-box

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.