react-search-field

KO | EN

gitlite — search

#javascript #typescript #llm #go #android #machine-learning #deep-learning #docker #java #awesome #vue #security #mcp #open-source

react-search-field

(★ 80)

An elegant search field component for React.

파일 탐색기

최종 버전 다운로드 (.zip)

- - node.js.yml
- FUNDING.yml
- index.min.js
- bundle.min.js
- index.html
- react-search-field.png
- - SearchField.jsx
- - App.css
  - App.jsx
  - exampleSnippets.js
  - index.html
  - index.jsx
  - react-search-field.png
- SearchField.test.jsx
- test.setup.js
.babelrc
.eslintrc
.gitignore
.npmignore
jest.config.js
LICENSE
package.json
README.md
SECURITY.md
webpack.config.js
webpack.production.config.js
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/nutboltu/react-search-field/master/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

react-search-field

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-search-field

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README