Skip to content

ghoshnirmalya/react-search-box

Repository files navigation

react search box

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.