React useDelay Hooks

Install

npm install --save use-delay

Usage

import React, { useCallback, useState } from 'react'
import { useThrottle, useDebounds } from 'use-delay'

const App = () => {
  const [throttleCount, setThrottleCount] = useState(0);
  const [deboundsCount, setDeboundsCount] = useState(0);
  const actionThrottleHandle = useCallback(() => {
    setThrottleCount(throttleCount + 1)
  })

  const actionDeboundsHandle = useCallback(() => {
    setDeboundsCount(deboundsCount + 1)
  })

  const onTrottle = useThrottle(1000, actionThrottleHandle)
  const onDebounds = useDebounds(1000, actionDeboundsHandle)

  return (
    <div className={"outerDiv"}>
      <div className={"throttleDiv"} onScroll={onTrottle}>
        <div className={"fixcount"}>
          {`throttle count ${throttleCount}`}
        </div>
        <div className={"innerDiv"}>
          throttle
        </div>
      </div>

      <div className={"deboundsDiv"} onScroll={onDebounds}>
        <div className={"fixcount"}>
          {`debounds count ${deboundsCount}`}
        </div>
        <div className={"innerDiv"}>
          debounds
        </div>
      </div>
    </div>
  )
}
export default App

* {
 box-sizing: border-box;
}

.outerDiv {
  display: block;
  width: 100%;
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid #000
}

.throttleDiv {
  display: inline-block;
  width: 50%;
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid red;
}

.deboundsDiv {
  display: inline-block;
  width: 50%;
  height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid blue;
}

.innerDiv {
  width: 100px;
  height: 100px;
  border: 1px solid green;

  margin-top: 1500px;
}

.fixcount {
  position: fixed;
}

License

MIT © 🐭snyung

---

This hook is created using create-react-hook.