{"_id":"@artifak/usedebouncedfn","_rev":"1-f555c92288c118feb762f3007f01ba60","name":"@artifak/usedebouncedfn","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@artifak/usedebouncedfn","version":"1.0.1","description":"A React hook to debounce functions or callbacks.","keywords":["react","debounce","hooks"],"author":{"name":"Julian Low"},"license":"MIT","sideEffects":false,"main":"dist/usedebouncedfn.cjs.js","module":"dist/usedebouncedfn.esm.js","src":"src/index.ts","types":"dist/src/index.d.ts","directories":{"src":"src","test":"__tests__"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"scripts":{"build":"rimraf dist && builder","test":"echo \"Error: run tests from root\" && exit 1"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"homepage":"https://github.com/heyjul3s/artifak#readme","devDependencies":{"@artifak/bundler":"^1.1.5","@types/lodash.debounce":"^4.0.6"},"dependencies":{"lodash.debounce":"^4.0.8","react-async-hook":"^3.6.2","use-constant":"^1.1.0"},"_id":"@artifak/usedebouncedfn@1.0.1","_nodeVersion":"10.24.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-daK6qE8FtaZrMxlwE6mnJ/fQRElDSmB1rFixUIpSY907OhDTgjfAk0QuRdR8YFZkce5FFEfcYUiKIJRnEBJiEg==","shasum":"c64566b6ada6f85b46c9d4d03e1a44f7c7a1a384","tarball":"https://registry.npmjs.org/@artifak/usedebouncedfn/-/usedebouncedfn-1.0.1.tgz","fileCount":10,"unpackedSize":44636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbZeRCRA9TVsSAnZWagAAoqcP/1NNCg6C5kfTfdUxzIxp\neVtslnJapLAmxTq4MlIJsic8ELAVhheDy/hw34RJPZ/ZEreGPqszf9p+ugLM\nH7NZh5ZlzizC5ib8gPO1FfbKTjeb/pvF0xFTNsADo9CnjQ/4pV5yr9BcTLFc\nXAkxBE9lGkpMDLZrnrQwcrXhUJFqDau1hisvai5QdAeVl2j/EWhsInSDRFCd\nG0f3L7uFelJY33/Yd51Sh8WiTbkIT8XvSo5YBi6QYXObSlSH0uK/0gGMSKxe\n9OXMD41kIyeVFm34lmMHZ4RBGninq+lPswOhG50oGVlXCvABu4UPcjo0vD98\n6+FaWKW/75oal2E4CT+oemQwsJvWS9fzhK6Z4cFrD8/zEll8ElOZ55i9vhRu\nhimYp2/x3CEE3Om3iTW7MQ+L1Yj54g4iRJFLaCispiF/6N1QBNXjIcQeCjJF\n9qJttSHSmw22ZQDOI8ka1GQvOZUqlDyhyPFeGUdSng9escqD4e3kDcUofD8G\nlf2TlkUmFbWrE/HnLsLywAp5fxjsZHpU883UU6XSpDsICn0wkky3y9bx5cpj\nD4cu9ril353eCEiKdSBAf7RMpCWwQ1mj4bcIkCtyjXTkBo0RD0nRHnWwx32y\nwO/2m6P9p1KuROb4eET+ht+N0X6rrEyy1xOKhsw0qXKdMKze4lItuS77OVfG\nEsu+\r\n=Gx6P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWsWnvPLAKCNIzRsGRGLQVC48HsnIK5CFDzMU5G0f6/AiBhOZMwv2BeFVEjykFzc038HoZR/6zzj9mzVfbjppngrQ=="}]},"_npmUser":{"name":"heyjules","email":"julian.cy.low@gmail.com"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/usedebouncedfn_1.0.1_1617794960946_0.9033097407767334"},"_hasShrinkwrap":false}},"time":{"created":"2021-04-07T11:29:20.621Z","1.0.1":"2021-04-07T11:29:21.087Z","modified":"2022-04-04T15:38:48.508Z"},"maintainers":[{"name":"heyjules","email":"julian.cy.low@gmail.com"}],"description":"A React hook to debounce functions or callbacks.","homepage":"https://github.com/heyjul3s/artifak#readme","keywords":["react","debounce","hooks"],"repository":{"type":"git","url":"git+https://github.com/heyjul3s/artifak.git"},"author":{"name":"Julian Low"},"bugs":{"url":"https://github.com/heyjul3s/artifak/issues"},"license":"MIT","readme":"# `@artifak/usedebouncefn`\n\nA react hook to debounce functions/callbacks.\n\n## Installation\n\n### Yarn\n\n```sh\nyarn add @artifak/usedebouncefn\n```\n\n### NPM\n\n```sh\nnpm install @artifak/usedebouncefn\n```\n\n## Usage\n\n```ts\nimport React from 'react';\nimport { useDebouncedFn } from 'artifak';\n\nexport function Debounce() {\n  const [searchString, setSearchString] = React.useState('');\n  const [dropDownOptions, setDropdownOptions] = React.useState([]);\n\n  const getDropDown = async val => {\n    await fetch('http://jsonplaceholder.typicode.com/posts')\n      .then(res => {\n        if (res.ok) {\n          return res.json();\n        }\n\n        throw res;\n      })\n      .then(res => {\n        const data = res.filter(datum => {\n          return datum.title.includes(val);\n        });\n\n        setDropdownOptions(data);\n      })\n      .catch(res => {\n        console.error(res);\n      });\n  };\n\n  const debounceDropDown = useDebouncedFn(\n    nextValue => getDropDown(nextValue),\n    1000\n  );\n\n  const onInputChangeHandler = ev => {\n    const nextValue = ev.target.value;\n    setSearchString(nextValue);\n    debounceDropDown(nextValue);\n  };\n\n  return (\n    <div>\n      <input\n        className=\"input\"\n        placeholder=\"Type Something...\"\n        onChange={onInputChangeHandler}\n        value={searchString}\n      />\n\n      {dropDownOptions.length && (\n        <div className=\"options\">\n          {dropDownOptions.map(dropDownOption => (\n            <div key={dropDownOption.id}>{dropDownOption.title}</div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n```\n","readmeFilename":"README.md"}