Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time
October 17, 2021 18:13
August 10, 2022 21:11
October 17, 2021 17:56
August 11, 2022 09:12
October 17, 2021 23:44
October 17, 2021 18:13
August 11, 2022 09:12
December 29, 2021 13:44
October 17, 2021 23:44
October 17, 2021 23:44
October 17, 2021 23:44
October 17, 2021 23:44
October 17, 2021 22:42

react search box

npm bundle size NPM npm npm Edit on Codesandbox


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

# yarn
yarn add react-search-box


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 (
        callback={(record) => console.log(record)}


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.


MIT Licensed. Copyright (c) Nirmalya Ghosh 2021.