https://github.com/nutboltu/react-search-field

An elegant search field component for React.
https://github.com/nutboltu/react-search-field

react react-search react-search-component search-bar search-field-list

Last synced: 19 days ago
JSON representation

An elegant search field component for React.

• Host: GitHub
• URL: https://github.com/nutboltu/react-search-field
• Owner: nutboltu
• License: mit
• Created: 2018-01-18T23:52:25.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-05T14:36:40.000Z (over 1 year ago)
• Last Synced: 2024-10-14T00:09:11.614Z (about 1 month ago)
• Topics: react, react-search, react-search-component, search-bar, search-field-list
• Language: JavaScript
• Homepage: https://nutboltu.github.io/react-search-field
• Size: 2.89 MB
• Stars: 82
• Watchers: 2
• Forks: 93
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# React Search Field

[![dependencies Status](https://david-dm.org/nutboltu/react-search-field/status.svg)](https://david-dm.org/nutboltu/react-search-field)  [![Actions Status](https://github.com/nutboltu/react-search-field/workflows/Package%20CI/badge.svg)](https://github.com/nutboltu/react-search-field/actions)



   



[![NPM](https://nodei.co/npm/react-search-field.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-search-field/)

An elegant search field component for React.

See [Demo and Documentation]( https://nutboltu.github.io/react-search-field/).

![Screenshot](/docs/react-search-field.png)

## Props

The component takes the following props.

| Prop              | Type       | Description |

|-------------------|------------|-------------|

| `classNames`         | string  | Additional classnames for the component |

| `searchText`  | string  | Initial search value of the input |

| `placeholder`  | string  | placeholder for the search input |

| `disabled`  | boolean  | Disabling the search input |

| `onChange`        | _function_ | Callback function to invoke when the user press any key. The function  should contain two parameters(value, event). |

| `onEnter`         | _function_ | Callback function to invoke when the user press enter after pressing few keys. The function  should contain two parameters(value, event). |

| `onSearchClick`          | _function_ | Callback function to invoke when the user click the search button. The function  should contain one parameter(value). |

| `onBlur`          | _function_ | Callback function to invoke when the user blurs the search box. The function  should contain two parameters(value, event). |

## Installation

```bash

npm install react-search-field --save

```

## Usage

```javascript

import SearchField from "react-search-field";

```

## Run

```bash

npm start

```

## License

MIT Licensed. Copyright (c) Farhad Yasir 2021.