use-in-view.mjs 746 B

1234567891011121314151617181920212223
  1. import { useState, useEffect } from 'react';
  2. import { inView } from '../render/dom/viewport/index.mjs';
  3. function useInView(ref, { root, margin, amount, once = false, initial = false, } = {}) {
  4. const [isInView, setInView] = useState(initial);
  5. useEffect(() => {
  6. if (!ref.current || (once && isInView))
  7. return;
  8. const onEnter = () => {
  9. setInView(true);
  10. return once ? undefined : () => setInView(false);
  11. };
  12. const options = {
  13. root: (root && root.current) || undefined,
  14. margin,
  15. amount,
  16. };
  17. return inView(ref.current, onEnter, options);
  18. }, [root, ref, margin, once, amount]);
  19. return isInView;
  20. }
  21. export { useInView };