Skip to content

ghoshnirmalya/react-search-box

master
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?
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
October 17, 2021 18:13
src
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

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.