react-transition-preset/dist/hooks/use-in-view.js

Lightweight, zero-dependency transition component for React with common preset transition

import { useState, useEffect } from 'react';
import { inView } from '../viewport/index.js';

// src/hooks/use-in-view.ts
function useInView(ref, { root, margin, amount = "some", once = false } = {}, options = {}) {
  const [isInView, setInView] = useState(false);
  const { enable } = options;
  useEffect(() => {
    if (!enable || !ref.current || once && isInView) return;
    const onEnter = () => {
      setInView(true);
      return once ? void 0 : () => setInView(false);
    };
    const options2 = {
      root: root && root.current || void 0,
      margin,
      amount
    };
    return inView(ref.current, onEnter, options2);
  }, [root, ref, margin, once, amount]);
  return isInView;
}

export { useInView };