{"_id":"@byndyusoft-ui/use-throttled-callback","name":"@byndyusoft-ui/use-throttled-callback","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@byndyusoft-ui/use-throttled-callback","version":"0.2.0","description":"Byndyusoft UI React Hook","keywords":["byndyusoft","byndyusoft-ui","react","hook","throttle","use-throttle","use-throttled-callback"],"author":{"name":"Fomin Gleb","email":"gleb.fom28@gmail.com"},"homepage":"https://github.com/Byndyusoft/ui/tree/master/hooks/use-throttled-callback#readme","license":"Apache-2.0","main":"dist/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/Byndyusoft/ui.git"},"scripts":{"build":"tsc --project tsconfig.build.json","clean":"rimraf dist","test":"jest --config ../../jest.config.js --roots hooks/use-throttled-callback/src","lint:check":"npm run eslint:check && npm run prettier:check && npm run stylelint:check","lint:fix":"npm run eslint:fix && npm run prettier:fix && npm run stylelint:fix","eslint:check":"eslint src --config ../../eslint.config.js","eslint:fix":"eslint src --config ../../eslint.config.js --fix","prettier:check":"prettier --check '**/*.{ts,tsx,css,scss,json}' '!**/dist/**'","prettier:fix":"prettier --write '**/*.{ts,tsx,css,scss,json}' '!**/dist/**'","stylelint:check":"stylelint '**/*.{css,scss}' --allow-empty-input","stylelint:fix":"stylelint '**/*.{css,scss}' --fix --allow-empty-input"},"bugs":{"url":"https://github.com/Byndyusoft/ui/issues"},"publishConfig":{"access":"public"},"dependencies":{"@byndyusoft-ui/use-timeout":"^2.0.1","@byndyusoft-ui/types":"^0.3.0"},"_id":"@byndyusoft-ui/use-throttled-callback@0.2.0","gitHead":"5920ee8866541500a40eaa680e727ab8308d505b","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-nwm/aZ7kiQkwwssdbsizE4L/HFtQUue63pRSmR3x9MNa4chwwIsODXEaAH5yiGt2HEyYutJuD+8lkAA90q4aoA==","shasum":"ecc3865b348c7c554056e673b81925e3cd76c4ba","tarball":"https://registry.npmjs.org/@byndyusoft-ui/use-throttled-callback/-/use-throttled-callback-0.2.0.tgz","fileCount":10,"unpackedSize":12266,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEKhdNUPyXyv4nYnZ5FYsq2gh/XspdQ1irKP8PSsCOIyAiBPNwGyg5hAUkoZuSmaS5HPGcu79GdYqCH01aKTU6v8gw=="}]},"_npmUser":{"name":"sadcitizen","email":"sadcitizen@yandex.ru"},"directories":{},"maintainers":[{"name":"sadcitizen","email":"sadcitizen@yandex.ru"},{"name":"alexanderbyndyu","email":"alexander.byndyu@yandex.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-throttled-callback_0.2.0_1741066898631_0.9602226904921616"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-04T05:41:38.561Z","0.2.0":"2025-03-04T05:41:38.802Z","modified":"2025-03-04T05:41:39.145Z"},"maintainers":[{"name":"sadcitizen","email":"sadcitizen@yandex.ru"},{"name":"alexanderbyndyu","email":"alexander.byndyu@yandex.ru"}],"description":"Byndyusoft UI React Hook","homepage":"https://github.com/Byndyusoft/ui/tree/master/hooks/use-throttled-callback#readme","keywords":["byndyusoft","byndyusoft-ui","react","hook","throttle","use-throttle","use-throttled-callback"],"repository":{"type":"git","url":"git+https://github.com/Byndyusoft/ui.git"},"author":{"name":"Fomin Gleb","email":"gleb.fom28@gmail.com"},"bugs":{"url":"https://github.com/Byndyusoft/ui/issues"},"license":"Apache-2.0","readme":"# `@byndyusoft-ui/use-throttled-callback`\r\n---\r\n> A React hook that throttles the execution of a function to ensure it is called at most once every specified delay.\r\n\r\n### Installation\r\n\r\n```\r\nnpm i @byndyusoft-ui/use-throttled-callback\r\n```\r\n\r\n### Usage\r\n\r\n#### useThrottledCallback\r\n```jsx\r\nimport React, { useState } from 'react';\r\nimport useThrottledCallback from '@byndyusoft-ui/use-throttled-callback';\r\n\r\nconst App = () => {\r\n    const [count, setCount] = useState(0);\r\n\r\n    const throttledHandleClick = useThrottledCallback(() => {\r\n        setCount(prevCount => prevCount + 1);\r\n    }, 1500);\r\n\r\n    return (\r\n        <div>\r\n            <h1>Throttle Click Demo</h1>\r\n            <p>Count: {count}</p>\r\n            <button onClick={throttledHandleClick}>Click me</button>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n### Options  `useThrottledCallback`\r\n\r\nThe useThrottledCallback accept an optional third parameter, which is an options object. The options object can have the following properties:\r\n- `leading`: Specifies whether the function should be called on the leading edge of the timeout. Default is `true`.\r\n- `trailing`: Specifies whether the function should be called on the trailing edge of the timeout. Default is `true`.\r\n\r\n```jsx\r\nconst throttleCallback = useThrottledCallback(() => {}, 1500, { leading: false });\r\n\r\nconst throttleCallback = useThrottledCallback(() => {}, 1500, { trailing: false });\r\n\r\n// Callback will not be called!\r\nconst throttleCallback = useThrottledCallback(() => {}, 1500, { leading: false, trailing: false });\r\n```\r\n\r\n>If both `leading` and `trailing` are set to `false`, the function will not be called at all. This configuration effectively disables the throttling mechanism, as the function will never be executed.\r\n","readmeFilename":"README.md"}