Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/satyendra2013/react-input-with-debouncing
A small lightweight React input component with debouncing that can be used in place of normal <input /> or <textarea /> fields.The component renders input with debouncing onChange event.
https://github.com/satyendra2013/react-input-with-debouncing
debounce react react-component react-input-with-debouncing react-library react-textarea-with-debouncing
Last synced: 9 days ago
JSON representation
A small lightweight React input component with debouncing that can be used in place of normal <input /> or <textarea /> fields.The component renders input with debouncing onChange event.
- Host: GitHub
- URL: https://github.com/satyendra2013/react-input-with-debouncing
- Owner: satyendra2013
- License: mit
- Created: 2020-10-02T09:57:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-23T15:31:00.000Z (over 3 years ago)
- Last Synced: 2024-12-08T13:15:33.926Z (about 1 month ago)
- Topics: debounce, react, react-component, react-input-with-debouncing, react-library, react-textarea-with-debouncing
- Language: JavaScript
- Homepage:
- Size: 637 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-input-with-debouncing
A small lightweight React input component with debouncing that can be used in place of normal `` or `` fields.The component renders input with debouncing onChange event.
[](https://www.npmjs.com/package/react-input-with-debouncing) [](https://standardjs.com)  
## Installation
### NPM
```bash
npm install --save react-input-with-debouncing
```
## Usage
```jsx
import React, { Component } from 'react'
import InputWithDebouncing from 'react-input-with-debouncing'
import 'react-input-with-debouncing/dist/index.css' //import of index.css is totally optional.
class ExampleInputWithDebouncing extends Component {
constructor(props) {
super(props);
this.state = {
value: '';
}
}
render() {
return (
this.setState({ value: e.target.value })}
value={this.state.value}
/>
)
}
}
```
## Options
### Default prop values
```js
```
## Usage explanation
### Note: This package is primarily built and tested on `` and `` keeping use cases in mind. But you can explore.
### `element` : PropTypes.oneOfType([PropTypes.string, PropTypes.func]) (default: 'input')
element prop can take either one of the value from `input` or `textarea`.
### `type` : PropTypes.string (default: 'text')
Default value of `type` prop is `text` but you can specify other options like `number`.
### `onChange`: PropTypes.func.isRequired (Mandatory Props)
`onChange` function is called with event passed through it on input change with debounced timeout.
### `value`: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) (default: undefined)
Default `value` of input is undefined. If not specified, then input works as non-controlled input.
### `minLength`: PropTypes.number (default: 0)
`minLength` prop specifies minimal length of text to start notify, if value becomes lesser then `minLength` (after removing some characters), there will be a notification with empty value `''`.
### `debounceTimeout`: PropTypes.number (default: 500)
`debounceTimeout` specifies the debouncing time in ms. If you specify `debounceTimeout = -1`, then it disable automatic notifications completely. On pressing of `Enter`, notification will be triggered only in this case.
### `notifyOnEnter`: PropTypes.bool (default: true)
On pressing `Enter`, notification of current value will be triggered immediately. Notification value follows the same rule as with debounced notification, so if length is less, then `minLength` - empty value `''` will be sent back.
### `notifyOnBlur`: PropTypes.bool (default: true)
In this case, notification will be sent only when focus leaves the input field.
### `inputRef`: PropTypes.func (default: undefined)
Pass `ref={inputRef}` to generated input element. `ref` is a special prop in React, and hence renamed `ref` to `inputRef`.
### `className` : className props will be applied directly on generated input.
This is an arbitrary prop which is directly applied to input field.
### `placeholder` : placeholder props will be applied directly on generated input.
This is an arbitrary prop which is directly applied to input field.
## Test
### Unit testing with lint testing
```bash
npm run test
```
### Unit testing
```bash
npm run test:unit
```
### Lint testing
```bash
npm run test:lint
```
### Testing during development
```bash
npm run test:watch
```
## License
MIT © [Satyendra Pandit](https://github.com/satyendra2013)