{"_id":"@bakunya/debounce-hooks","_rev":"1-9551fd9a76530e02bd0e7b97a552aea5","name":"@bakunya/debounce-hooks","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bakunya/debounce-hooks","version":"0.1.0","description":"Debounce hooks based on state changed.","author":{"name":"bakunya"},"license":"MIT","homepage":"https://github.com/bakunya/debounce-hooks#readme","bugs":{"url":"https://github.com/bakunya/debounce-hooks/issues"},"repository":{"type":"git","url":"git+https://github.com/bakunya/debounce-hooks.git"},"dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"keywords":["react","react-hooks","debounce","useDebounce","custom hooks"],"_id":"@bakunya/debounce-hooks@0.1.0","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-vvs1QoAJjKmWY2U5fyZvTNHFECEPnM5LX0hSxR3vWhpzSRFVhAG/znZoW8LESvuTlkDW7yKiqWcotsX9O4aUng==","shasum":"ae99131618cba1242f66df9158a1889ecbcaf629","tarball":"https://registry.npmjs.org/@bakunya/debounce-hooks/-/debounce-hooks-0.1.0.tgz","fileCount":5,"unpackedSize":5226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiB3NpCRA9TVsSAnZWagAASi8P/2qRcZG7tQmoscJb5ill\nhbl7FL2WLh/LrWa5EOA3zhxhDsYRL/4nQKdSD0YXxEgxLzHeo8UAwyBirah6\nCo8/6vNwkW68yTmGl9gSqx6FTcOa7cAorv/L5rUCb1xU5qShm17XYdMbTR1f\n5jnnbH1ZmsGKnOyKaAS/uY9OXiyDNPp0H9gWod9uhTLbrDF54lnlh6rclVux\nKhpxVAaJBi7xuvOhScRFPalHM5pI5LumvCAJeXbF7sjkeSwE/Y2gd5KdFIYZ\nzOxmghCwsVKmGHzXUE0sKyMansV6uUSEog6Inu/U4vDKwhQZaQiDWdHuiFW/\n/qvbZiiX2gaDz2NB9vGCmhrpExzQHYMfdHDRwd0HIWGTA1P1IMyxFKz56Whu\nkSMn9khqOlVcQalVq8F6dsg71gJ8AWe4Xt/+75O5NiiYmi3fIMmiU9V7GYju\nfdWaiJ6YvlRxLhf6ILi2Eu4A20JDcq1Wb9JMvOpDVyZ74WW9eeu0orwyFak8\nazP6qxLvZjG2Nm6v+ee/I9g7hHyL6EvT+rVl2Fb/kf0U8+d7Z4T7nCLaX5yr\naJ5m/TxUDSSsrkb9FveOL2tqzSyxTM+L+t6Neiwx92P8VwWDGbErDUqn+HA1\npxO7II3x2fVU+2j7UrdPaHpwoqEeicOB9Da+/UW0LRfcp9jccrpzs/ynbGvT\nBSjr\r\n=mXKw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbX729mmCRUpo48TYr98ZZ/wD68duNImNRi6gtzx/D5AiBetLGZK+s3vwdf7PJf1pYYNwLSCcEUm9aUM5kzPpWiiQ=="}]},"_npmUser":{"name":"bakunya","email":"myoukaarata@gmail.com"},"directories":{},"maintainers":[{"name":"bakunya","email":"myoukaarata@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/debounce-hooks_0.1.0_1644655465040_0.7790193377410468"},"_hasShrinkwrap":false}},"time":{"created":"2022-02-12T08:44:24.987Z","0.1.0":"2022-02-12T08:44:25.160Z","modified":"2022-04-04T17:32:20.188Z"},"maintainers":[{"name":"bakunya","email":"myoukaarata@gmail.com"}],"description":"Debounce hooks based on state changed.","homepage":"https://github.com/bakunya/debounce-hooks#readme","keywords":["react","react-hooks","debounce","useDebounce","custom hooks"],"repository":{"type":"git","url":"git+https://github.com/bakunya/debounce-hooks.git"},"author":{"name":"bakunya"},"bugs":{"url":"https://github.com/bakunya/debounce-hooks/issues"},"license":"MIT","readme":"# Debounce Hooks\nReact debounce hooks based on state changed.\n\n## [Live Preview / Demo In Here](https://bakunya-debounce-hooks.netlify.app)\n\n\n## Basic Usage\n\n### Note\n**debounceFunction must be function that wrapped on useCallback. Cause every dependencies changed on useCallback (rerender function), it will be trigger debounce-hooks to running debounceFunction**\n\n```jsx\nconst [value, setValue] = useState('bakunya')\n\nuseDebounce({\n    // timeout count.\n    timeout: 1000,\n    \n    // function that wrapped on useCallback hooks\n    debounceFunction: useCallback(async () => {\n    \n        // value will be print after value state not change in 1000ms/1s\n        console.log(value)\n        \n    }, [ value ])\n})\n\nconst handleChange = useCallback((e) => {\n    setValue(e.target.value)\n}, [setValue])\n```\n\n## Fetch API Examples\n\n```jsx\nimport useDebounce from \"debounce-hooks\"\nimport { useCallback, useState } from \"react\"\n\nconst App = () => {\n    const [api, setApi] = useState('Miku-chan')\n    const [value, setValue] = useState('0')\n    const [error, setError] = useState('')\n    const [loading, setLoading] = useState(false)\n\n    useDebounce({\n        timeout: 1000,\n        debounceFunction: useCallback(async () => {\n            setLoading(true)\n            setError('')\n            try {\n                if(!value || isNaN(value)) throw new Error('value must be number')\n                let data = await fetch(`https://jsonplaceholder.typicode.com/posts/${value}`)\n                if(data.status !== 200) throw new Error('Error when fetch request')\n                data = await data.json()\n                setApi(data?.title ?? 'bakunya')\n            } \n            catch(er) { setError(er.message) }\n            finally { setLoading(false) }\n        }, [ setApi, setLoading, setError, value ])\n    })\n\n    const handleChange = useCallback((e) => {\n        setValue(e.target.value)\n    }, [setValue])\n    \n    return (\n        <div className=\"min-h-[200vh]\">\n            <input type=\"text\" onChange={handleChange} value={value} />\n            {\n                loading && <p>Loading...</p>\n            }\n            {\n                !loading && !!error && <p>Ups something wrong, message: {error}</p>\n            }\n            {\n                !loading && !error && <p>{api}</p>\n            }\n        </div>\n    )\n}\n  \nexport default App\n```\n\n## License\nThis project under MIT License.\n\n## Support Developer\n**You can support developer in [Here](https://trakteer.id/bakunya/tip). Thank you.**","readmeFilename":"README.md"}