react-search-box
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i react-search-box

Weekly Downloads

2,045

Version

3.0.0

License

MIT

Unpacked Size

199 kB

Total Files

6

Last publish

Collaborators

  • ghoshnirmalya