项目作者: SeonHyungJo

项目描述 :
⏳Easy Throttle, Debounds Hooks
高级语言: JavaScript
项目地址: git://github.com/SeonHyungJo/use-delay.git
创建时间: 2020-01-26T20:53:24Z
项目社区:https://github.com/SeonHyungJo/use-delay

开源协议:

下载



React useDelay Logo

React useDelay Hooks



NPM JavaScript Style Guide

React useDelay example

Install

  1. npm install --save use-delay

Usage

  1. import React, { useCallback, useState } from 'react'
  2. import { useThrottle, useDebounds } from 'use-delay'
  3. const App = () => {
  4. const [throttleCount, setThrottleCount] = useState(0);
  5. const [deboundsCount, setDeboundsCount] = useState(0);
  6. const actionThrottleHandle = useCallback(() => {
  7. setThrottleCount(throttleCount + 1)
  8. })
  9. const actionDeboundsHandle = useCallback(() => {
  10. setDeboundsCount(deboundsCount + 1)
  11. })
  12. const onTrottle = useThrottle(1000, actionThrottleHandle)
  13. const onDebounds = useDebounds(1000, actionDeboundsHandle)
  14. return (
  15. <div className={"outerDiv"}>
  16. <div className={"throttleDiv"} onScroll={onTrottle}>
  17. <div className={"fixcount"}>
  18. {`throttle count ${throttleCount}`}
  19. </div>
  20. <div className={"innerDiv"}>
  21. throttle
  22. </div>
  23. </div>
  24. <div className={"deboundsDiv"} onScroll={onDebounds}>
  25. <div className={"fixcount"}>
  26. {`debounds count ${deboundsCount}`}
  27. </div>
  28. <div className={"innerDiv"}>
  29. debounds
  30. </div>
  31. </div>
  32. </div>
  33. )
  34. }
  35. export default App
  1. * {
  2. box-sizing: border-box;
  3. }
  4. .outerDiv {
  5. display: block;
  6. width: 100%;
  7. height: 500px;
  8. overflow-x: hidden;
  9. overflow-y: scroll;
  10. border: 1px solid #000
  11. }
  12. .throttleDiv {
  13. display: inline-block;
  14. width: 50%;
  15. height: 500px;
  16. overflow-x: hidden;
  17. overflow-y: scroll;
  18. border: 1px solid red;
  19. }
  20. .deboundsDiv {
  21. display: inline-block;
  22. width: 50%;
  23. height: 500px;
  24. overflow-x: hidden;
  25. overflow-y: scroll;
  26. border: 1px solid blue;
  27. }
  28. .innerDiv {
  29. width: 100px;
  30. height: 100px;
  31. border: 1px solid green;
  32. margin-top: 1500px;
  33. }
  34. .fixcount {
  35. position: fixed;
  36. }

License

MIT © :mouse:snyung


This hook is created using create-react-hook.