{"_id":"@byndyusoft-ui/use-throttled-value","name":"@byndyusoft-ui/use-throttled-value","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@byndyusoft-ui/use-throttled-value","version":"0.2.0","description":"Byndyusoft UI React Hook","keywords":["byndyusoft","byndyusoft-ui","react","hook","throttle","use-throttle","use-throttled-value"],"author":{"name":"Fomin Gleb","email":"gleb.fom28@gmail.com"},"homepage":"https://github.com/Byndyusoft/ui/tree/master/hooks/use-throttled-value#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-value/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-throttled-callback":"0.2.0","@byndyusoft-ui/types":"0.3.0"},"_id":"@byndyusoft-ui/use-throttled-value@0.2.0","gitHead":"e91ffbca3404be433511672512d6a544735c7bdc","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-CQoaw8F0sq3GCfGRT7B0TMqSTm+diAyf2ieo3RAwsPfFiN4Z1lKDWAVAO9gkkzxaFcVp2Oe8Mjk2zfxCf5xQ7w==","shasum":"2aaa272eb3f2ed8864f97d17e5ea6fd1749c47d6","tarball":"https://registry.npmjs.org/@byndyusoft-ui/use-throttled-value/-/use-throttled-value-0.2.0.tgz","fileCount":10,"unpackedSize":5540,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDB/Ov85keCo6Mr4XFYUxtJHECy/AdiiBVprSBNqgNtEQIhAIxrs4o4re1vrgBPLztltvY6kG3wEcRRtZnSUihQhfyX"}]},"_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-value_0.2.0_1741067140534_0.5288401113282151"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-04T05:45:40.436Z","0.2.0":"2025-03-04T05:45:40.701Z","modified":"2025-03-04T05:45:40.990Z"},"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-value#readme","keywords":["byndyusoft","byndyusoft-ui","react","hook","throttle","use-throttle","use-throttled-value"],"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-throttle`\r\n---\r\n> A React hook that throttles value updates to a specified delay.\r\n\r\n### Installation\r\n\r\n```\r\nnpm i @byndyusoft-ui/use-throttled-value\r\n```\r\n### Usage\r\n\r\n#### useThrottledValue\r\n```jsx\r\nimport React, { useState, useMemo } from \"react\";\r\nimport { useThrottledValue } from '@byndyusoft-ui/use-throttled-value';\r\n\r\nconst initValue = 0;\r\n\r\nexport default function App() {\r\n  const [throttledValue, setThrottledValue] = useThrottledValue(initValue, 1500);\r\n\r\n  const performHeavyCalculation = () => {\r\n    setThrottledValue(Math.floor(Math.random() * 10000));\r\n  };\r\n  \r\n  return (\r\n    <div>\r\n      <button onClick={performHeavyCalculation}>Calculate</button>\r\n      <p>Throttled value: {throttledValue}</p>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Options for useThrottledValue\r\n\r\nThe `useThrottledValue` hook accepts an optional third parameter, which is an options object. The options object can have the following properties:\r\n\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 [throttledValue, setThrottledValue] = useThrottledValue(0, 1500, { leading: false });\r\n\r\nconst [throttledValue, setThrottledValue] = useThrottledValue(0, 1500, { trailing: false });\r\n\r\n// Callback will not be called!\r\nconst [throttledValue, setThrottledValue] = useThrottledValue(0, 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"}