An autocomplete search box for ReactJS

Usage no npm install needed!

<script type="module">
  import nurhannaReactSearchBox from 'https://cdn.skypack.dev/@nurhanna/react-search-box';


react search box

Greenkeeper Build Status downloads MIT License PRs Welcome


npm i react-search-box --save

If you prefer to use yarn, you can do:

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)}


  • 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.
  • 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
  • Jest - Delightful JavaScript Testing
  • react-testing-library - Simple and complete React DOM testing utilities that encourage good testing practices.
  • Fuse - Lightweight fuzzy-search library. Zero dependencies.
  • styled components - Visual primitives for the component age.


MIT Licensed. Copyright (c) Nirmalya Ghosh 2019.