{"_id":"react-debounce-component","_rev":"1-5990cef0415aced5ba33e6d69f5cc4aa","name":"react-debounce-component","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"react-debounce-component","version":"1.0.0","description":"Debounce input, search, render, functions or anything else with <Debounce/> in React and React Native","main":"dist/debounce.js","author":{"name":"Rebsos"},"license":"MIT","scripts":{"build":"webpack"},"keywords":["debounce","React","React Native","input","component","debouncing","search","onchange","render","function","fetch","api","searchbar","functional component"],"repository":{"type":"git","url":"git+https://github.com/Rebsos/react-debounce-component.git"},"devDependencies":{"@babel/cli":"^7.6.4","@babel/core":"^7.6.4","@babel/preset-env":"^7.6.3","@babel/preset-react":"^7.6.3","babel-loader":"^8.0.6","react":"^16.0.0","webpack":"^4.41.2","webpack-cli":"^3.3.10"},"gitHead":"fb1fcf6a87d9fca2de2d1a72186dfa173aba1726","bugs":{"url":"https://github.com/Rebsos/react-debounce-component/issues"},"homepage":"https://github.com/Rebsos/react-debounce-component#readme","_id":"react-debounce-component@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"rebs","email":"rebs85@gmail.com"},"dist":{"integrity":"sha512-dXWyoJC/T/1C6HIghPEJ8vCZocseCYGdGi8jAlyGk3VIsXuKM58qWs1r1n5CrMciQ4/HHRfWggtOQ5NzjdvheA==","shasum":"4d379124bbf011789a7c2b9e39c60b20e897e322","tarball":"https://registry.npmjs.org/react-debounce-component/-/react-debounce-component-1.0.0.tgz","fileCount":5,"unpackedSize":31297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxqLLCRA9TVsSAnZWagAAqRYP/1PToIjWWZ9QvousHC21\nOoNoSNi55DyC59YS0+BkS4fE2IzGtlyseBftqv4xNoe+yWWXcPNDsWxzVaMJ\nLFPLGECBwtJyhGWsq+nJUojz78KyGLPB7t8QEpo48tDyjJ1VV1Pwh4pTavcv\nmHNthgibzGFKx0FAZOZ9bULL4nkGaEjUCWfC9X23NWl1TXlY622pDY9BISMm\nJxUEWUpdngLmbk35qvvDtrR8MklBOcU5gxIhHG6p10sTeby2yrSmyqpjfDvL\nYOqqgM4bluaZUD0rCKlCWneJEECknsbNE2/jJ8BMCUT1We/aFmiLrekUuL/i\nIGWNI5wVT0YlwkWeQoPKD6WfbL5xa3Puoq6TzSDrPBDq0JRaic/nsPphlMve\nbbtYxOIr1MXNXyVOWEAD1Wr6rJDPIRBmANHjNH0Zb8c2pwVkrjFhy0ZZHT1k\nYRrjrIYJDJ6jhbT6egfkkh2uMz4oULJBCtMXhA4hSRiS483DlVo9Rb9hxE5j\nYa7DnaDD7DCQNcSzVojuHzrPeNgHyipTsnJKCNpfN6GTXTS/JsNqX6dHt/V6\n1oPPEc4rzXGtWXTdzSzRg/e2wGa3fQ8Tm6QU4WoEoZtE4lJ548epYTipZUxt\niNOlXgxHBs5isy5UxbXlfLR9SPtoadABhjkTQEeKweGxsu0KvEETCOFN5ri8\nJLDU\r\n=nunb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqSRienKl9TZCoM8u8iG3iOgkpt6CXgJSPjS50/c8PuAiAu17Gc1t0rjvwAr9DQ8y2Lz/Ju+6EByd/yUP8SeGcpCQ=="}]},"maintainers":[{"name":"rebs","email":"rebs85@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-debounce-component_1.0.0_1573298890689_0.5076572444065643"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-09T11:28:10.689Z","1.0.0":"2019-11-09T11:28:10.901Z","modified":"2022-05-14T09:22:12.189Z"},"maintainers":[{"name":"rebs","email":"rebs85@gmail.com"}],"description":"Debounce input, search, render, functions or anything else with <Debounce/> in React and React Native","homepage":"https://github.com/Rebsos/react-debounce-component#readme","keywords":["debounce","React","React Native","input","component","debouncing","search","onchange","render","function","fetch","api","searchbar","functional component"],"repository":{"type":"git","url":"git+https://github.com/Rebsos/react-debounce-component.git"},"author":{"name":"Rebsos"},"bugs":{"url":"https://github.com/Rebsos/react-debounce-component/issues"},"license":"MIT","readme":"# react-debounce-component\n> Debounce any component with React or React Native\n\n```js\n<input>\n<Debounce ms={500}>\n  <List/>\n</Debounce>\n```\n\n**Tiny**: react-debounce-component is very tiny, fast and does not require any other package. Overall it has under 70 lines of code.\n\n**Generic**: You can debounce almost anything you want: input, search, render, functional components, fetch, api calls, ... It works with react *and* react-native.\n\n**Easy**: [Think In React](https://reactjs.org/docs/thinking-in-react.html) not JS. Most other solution work with functions, but this is a &lt;Component&gt;. It makes the code easier to understand and less error-prone. Just put what you want to debounce inside &lt;Debounce&gt;*here*&lt;/Debounce&gt; of your render function and you're good.\n\n\n\n## Install\n```sh\nnpm install react-debounce-component --save\n```\nor use yarn.\n\n\n## Examples\n\n### Example 1\n\nThis is the most simple example. It just debounces the output of &lt;input&gt; for one second.\n\n![](example-1-demo.gif)\n\n```js\nimport React from 'react';\nimport Debounce from 'react-debounce-component';\n\nclass App extends React.Component {\n  constructor (props) {\n    super(props);\n    this.state = {value: 'Hello'}\n  }\n  render () {\n    return (\n      <div>\n        <input value={this.state.value} onChange={(event) => {this.setState({value: event.target.value})}}/>\n        <Debounce ms={1000}>\n          <div>{this.state.value}</div>\n        </Debounce>\n      </div>\n    );\n  }\n}\n\nexport default App;\n```\n\n### Example 2\n\nThis is a more common scenario, where a list gets fetched from the web.\n\n<details><summary>Expand</summary><p>\n\n```js\nimport React from 'react';\nimport Debounce from 'react-debounce-component';\n\nclass App extends React.Component {\n  constructor (props) {\n    super(props);\n    this.state = {value: ''}\n  }\n  render () {\n    return (\n      <div>\n        <input value={this.state.value} onChange={event => this.setState({value: event.target.value})}/>\n        <Debounce ms={1000}>\n          <List search={this.state.value}/>\n        </Debounce>\n      </div>\n    );\n  }\n}\n\nclass List extends React.Component {\n  constructor (props) {\n    super(props);\n    this.state = {items: []};\n  }\n  componentDidUpdate (prevProps) {\n    if (prevProps !== this.props) { // Prevent rendering after setState()\n      fetch('https://api.publicapis.org/entries?title=' + this.props.search)\n        .then(res => res.json())\n        .then(result => this.setState({items: result.entries || []}));\n    }\n  }\n  render () {\n    return (\n      <ul>\n        {this.state.items.map(item => (\n          <li key={item.Link}>\n            {item.API} {item.Link}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n}\n\nexport default App;\n```\n</p></details>\n\n\n\n\n\n## Props\n\n### ms\n\nTime to wait (delay) in milliseconds until the component inside &lt;Debounce&gt; gets rendered.\n\n|          |        |\n| -------- | ------ |\n| required | no     |\n| default  | 250    |\n| type     | number |\n\n### initialComponent\n\nWhat to display on first render (mount). Default is to render the children immediately (e.g. fetch immediately)\n\nTip: put in null to prevent rendering the children on mount\n\n|          |           |\n| -------- | --------- |\n| required | no        |\n| default  | children  |\n| type     | component |\n\n\n\n---\n\nSupports React version 16.0.0 and higher. Should even work with 0.13.0 and higher.\n\n---\n\n### License\n\nreact-debounce-component is [MIT licensed](./LICENSE).\n","readmeFilename":"README.md"}