How to use @react-hook/window-scroll - 3 common examples

export const useWindowScroller = (
  initialWidth: number,
  initialHeight: number,
  options: WindowScrollerOptions = emptyObj
): WindowScrollerResult => {
  const fps = options.scroll?.fps || 8
  const scrollY = useWindowScroll(fps)
  const [width, height] = useWindowSize(
    initialWidth,
    initialHeight,
    options.size || defaultSizeOpt
  )
  const [isScrolling, setIsScrolling] = useState(false)
  const isScrollingTimeout = useRef()

  useLayoutEffect(() => {
    if (isScrollingTimeout.current !== null) {
      clearTimeout(isScrollingTimeout.current)
      isScrollingTimeout.current = void 0
    }

    setIsScrolling(true)
    isScrollingTimeout.current = window.setTimeout(() => {

export default (initialWidth, initialHeight, opt = emptyObj) => {
  const fps = opt.scroll?.fps || defaultScrollFps
  const scrollY = useWindowScroll(fps)
  const [width, height] = useWindowSize(
    initialWidth,
    initialHeight,
    opt.size || defaultSizeOpt
  )
  const [isScrolling, setIsScrolling] = useState(false)
  const isScrollingTimeout = useRef(null)

  useLayoutEffect(() => {
    if (isScrollingTimeout.current !== null) {
      clearTimeout(isScrollingTimeout.current)
      isScrollingTimeout.current = null
    }

    setIsScrolling(true)
    isScrollingTimeout.current = setTimeout(() => {

const QuestionsHeader = ({ items, questions, isFixed, resetItems }) => {
  const scrollY = useWindowScroll(60);
  const scrollPoint = scrollY > 238;
  const fixedClass = isFixed && "question__header__fixed";
  const showFixed = isFixed && scrollPoint && "question__header__fixed--show";
  const hideNoneFixed = !isFixed && scrollPoint && "question__header--hide";

  return (
    <div>
      <span>
        {!items ? 0 : items.length}/{questions.length}
      </span>
      <button>
        Reset
      </button>
    </div>