{"id":23779290,"url":"https://github.com/satyendra2013/react-input-with-debouncing","last_synced_at":"2026-05-09T09:18:31.646Z","repository":{"id":57333471,"uuid":"300572101","full_name":"satyendra2013/react-input-with-debouncing","owner":"satyendra2013","description":"A small lightweight React input component with debouncing that can be used in place of normal \u003cinput /\u003e or \u003ctextarea /\u003e fields.The component renders input with debouncing onChange event.","archived":false,"fork":false,"pushed_at":"2021-05-23T15:31:00.000Z","size":652,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T07:54:04.801Z","etag":null,"topics":["debounce","react","react-component","react-input-with-debouncing","react-library","react-textarea-with-debouncing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/satyendra2013.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-02T09:57:11.000Z","updated_at":"2021-05-23T15:31:05.000Z","dependencies_parsed_at":"2022-08-24T19:41:44.742Z","dependency_job_id":null,"html_url":"https://github.com/satyendra2013/react-input-with-debouncing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satyendra2013%2Freact-input-with-debouncing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satyendra2013%2Freact-input-with-debouncing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satyendra2013%2Freact-input-with-debouncing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satyendra2013%2Freact-input-with-debouncing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/satyendra2013","download_url":"https://codeload.github.com/satyendra2013/react-input-with-debouncing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/satyendra2013%2Freact-input-with-debouncing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259280790,"owners_count":22833448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debounce","react","react-component","react-input-with-debouncing","react-library","react-textarea-with-debouncing"],"created_at":"2025-01-01T10:16:27.053Z","updated_at":"2026-05-09T09:18:26.613Z","avatar_url":"https://github.com/satyendra2013.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-input-with-debouncing\n\nA small lightweight React input component with debouncing that can be used in place of normal `\u003cinput /\u003e` or `\u003ctextarea /\u003e` fields.The component renders input with debouncing onChange event.\n\n[![NPM](https://img.shields.io/npm/v/react-input-with-debouncing.svg)](https://www.npmjs.com/package/react-input-with-debouncing) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) ![node-current](https://img.shields.io/node/v/react-input-with-debouncing/latest) ![npm peer dependency version](https://img.shields.io/npm/dependency-version/react-input-with-debouncing/peer/react)\n\n## Installation\n\n### NPM\n\n```bash\nnpm install --save react-input-with-debouncing\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport InputWithDebouncing from 'react-input-with-debouncing'\nimport 'react-input-with-debouncing/dist/index.css' //import of index.css is totally optional.\n\nclass ExampleInputWithDebouncing extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: '';\n    }\n  }\n\n  render() {\n    return (\n      \u003cInputWithDebouncing\n        type=\"text\"\n        placeholder='Search'\n        className='input-search'\n        minLength={1}\n        debounceTimeout={1000}\n        onChange={(e) =\u003e this.setState({ value: e.target.value })}\n        value={this.state.value}\n      /\u003e\n    )\n  }\n}\n```\n\n## Options\n\n### Default prop values\n\n```js\n\u003cInputWithDebouncing\n  element= 'input',\n  type= 'text',\n  onKeyDown= {undefined},\n  onBlur= {undefined},\n  value= {undefined},\n  minLength= {0},\n  debounceTimeout= {500},\n  notifyOnEnter= {true},\n  notifyOnBlur= {true},\n  inputRef= {undefined}\n /\u003e\n```\n\n## Usage explanation\n\n### Note: This package is primarily built and tested on `\u003cinput /\u003e` and `\u003ctextarea /\u003e` keeping use cases in mind. But you can explore.\n\n### `element` : PropTypes.oneOfType([PropTypes.string, PropTypes.func]) (default: 'input')\n\nelement prop can take either one of the value from `input` or `textarea`.\n\n### `type` : PropTypes.string (default: 'text')\n\nDefault value of `type` prop is `text` but you can specify other options like `number`.\n\n### `onChange`: PropTypes.func.isRequired (Mandatory Props)\n\n`onChange` function is called with event passed through it on input change with debounced timeout.\n\n### `value`: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) (default: undefined)\n\nDefault `value` of input is undefined. If not specified, then input works as non-controlled input.\n\n### `minLength`: PropTypes.number (default: 0)\n\n`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 `''`.\n\n### `debounceTimeout`: PropTypes.number (default: 500)\n\n`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.\n\n### `notifyOnEnter`: PropTypes.bool (default: true)\n\nOn 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.\n\n### `notifyOnBlur`: PropTypes.bool (default: true)\n\nIn this case, notification will be sent only when focus leaves the input field.\n\n### `inputRef`: PropTypes.func (default: undefined)\n\nPass `ref={inputRef}` to generated input element. `ref` is a special prop in React, and hence renamed `ref` to `inputRef`.\n\n### `className` : className props will be applied directly on generated input.\n\nThis is an arbitrary prop which is directly applied to input field.\n\n### `placeholder` : placeholder props will be applied directly on generated input.\n\nThis is an arbitrary prop which is directly applied to input field.\n\n## Test\n\n### Unit testing with lint testing\n\n```bash\nnpm run test\n```\n\n### Unit testing\n\n```bash\nnpm run test:unit\n```\n\n### Lint testing\n\n```bash\nnpm run test:lint\n```\n\n### Testing during development\n\n```bash\nnpm run test:watch\n```\n\n## License\n\nMIT © [Satyendra Pandit](https://github.com/satyendra2013)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatyendra2013%2Freact-input-with-debouncing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsatyendra2013%2Freact-input-with-debouncing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsatyendra2013%2Freact-input-with-debouncing/lists"}