# react-search-field

> This is a simple search field component for react

Latest version **2.0.1** (published 2021-07-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-search-field
pnpm add react-search-field
yarn add react-search-field
bun add react-search-field
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-07-11 |
| First published | 2018-01-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 80 |
| Author | Farhad Yasir |
| Maintainers | nutboltu |
| Keywords | react, react search, react search field, react search component, searchbar, search |

## Links

- npm: https://www.npmjs.com/package/react-search-field
- Repository: https://github.com/nutboltu/react-search-field
- Homepage: https://github.com/nutboltu/react-search-field#readme
- Issues: https://github.com/nutboltu/react-search-field/issues
- npm.io page: https://npm.io/package/react-search-field

## Dependencies (3)

- [typeco](https://npm.io/package/typeco.md) 1.0.0
- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [react-github-btn](https://npm.io/package/react-github-btn.md) 1.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2021-07-11
- 2.0.0 — 2021-07-05
- 1.2.1 — 2021-04-26
- 1.2.0 — 2020-12-18
- 1.1.0 — 2020-08-26
- 1.0.0 — 2018-11-25
- 0.0.3 — 2018-01-19
- 0.0.2 — 2018-01-19
- 0.0.1 — 2018-01-19

## 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)
<a href="https://twitter.com/intent/follow?screen_name=nutboltu">
   <img src="https://img.shields.io/twitter/follow/nutboltu.svg?label=Follow%20@nutboltu" alt="Follow @nutboltu" />
</a>

[![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";

<SearchField
  placeholder="Search..."
  onChange={onChange}
  searchText="This is initial search text"
  classNames="test-class"
/>
```

## Run

```bash
npm start
```

## License

MIT Licensed. Copyright (c) Farhad Yasir 2021.

---
_Source: https://npm.io/package/react-search-field · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._