{"library":"react-debounce-input","title":"React Debounced Input Component","description":"react-debounce-input is a React component that provides debounced `onChange` functionality for HTML input elements (like `<input>` or `<textarea>`) or any custom React component that follows the `value`/`onChange` prop pattern. It prevents excessive re-renders, state updates, or API calls during rapid user input by delaying the `onChange` callback until a specified `debounceTimeout` has elapsed since the last change. The current stable version is `3.3.0`, which added official React 18 support. The package maintains an active release cadence, addressing bug fixes, enhancing features (e.g., TypeScript support since v3.2.0, `inputRef` in v3.1.0), and keeping dependencies updated. Its primary differentiator is its straightforward, drop-in usability, enabling developers to easily integrate debouncing without writing custom logic, offering a simple alternative to more complex form libraries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-debounce-input"],"cli":null},"imports":["import { DebounceInput } from 'react-debounce-input';","import type { DebounceInputProps } from 'react-debounce-input';","const { DebounceInput } = require('react-debounce-input');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { DebounceInput } from 'react-debounce-input';\n\ninterface AppState {\n  value: string;\n}\n\nconst App: React.FC = () => {\n  const [value, setValue] = useState<string>('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    console.log('Debounced onChange triggered:', event.target.value);\n    setValue(event.target.value);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h1>React Debounce Input Demo</h1>\n      <label htmlFor=\"debounced-input\" style={{ display: 'block', marginBottom: '10px' }}>\n        Type here (min 2 chars, 300ms debounce):\n      </label>\n      <DebounceInput\n        id=\"debounced-input\"\n        minLength={2}\n        debounceTimeout={300}\n        onChange={handleChange}\n        placeholder=\"Start typing...\"\n        style={{ width: '300px', padding: '8px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '4px' }}\n      />\n\n      <p style={{ marginTop: '20px', fontSize: '1.1em' }}>\n        Current debounced value: <strong>{value}</strong>\n      </p>\n      <p style={{ color: '#666' }}>\n        This input will only update the displayed value after 300ms of no typing and when at least 2 characters have been entered.\n        Pressing Enter will also force a notification (by default).\n      </p>\n    </div>\n  );\n};\n\nconst appRoot = document.getElementById('app-root') || document.createElement('div');\nappRoot.id = 'app-root';\ndocument.body.appendChild(appRoot);\nReactDOM.render(<App />, appRoot);","lang":"typescript","description":"This quickstart demonstrates how to use `DebounceInput` with a functional React component, setting a minimum length and a debounce timeout. It also showcases state management for the debounced value.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}