Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2774 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2774 Rev 3719
Línea 1... Línea 1...
1 
import { useState, useEffect, useRef } from 'react'
 1 
import { useState, useEffect, useRef } from 'react';
2 
 
 2 
 
3 
export function useNearScreen({
 3 
export function useNearScreen({ once = true, rootMargin = '100px' }) {
4 
  externalRef,
 - 
 
5 
  once = true,
 - 
 
6 
  rootMargin = '100px'
 - 
 
7 
}) {
 - 
 
8 
  const [isNearScreen, setShow] = useState(false)
 4 
  const [isNearScreen, setShow] = useState(false);
9 
  const fromRef = useRef(null)
 5 
  const fromRef = useRef(null);
10 
 
 6 
 
11 
  useEffect(() => {
 7 
  useEffect(() => {
12 
    const element = externalRef ? externalRef.current : fromRef.current
 - 
 
13 
 
 - 
 
14 
    const onChange = (entries, observer) => {
 8 
    const onChange = (entries, observer) => {
15 
      const el = entries[0]
 9 
      const el = entries[0];
16 
 
 10 
 
17 
      if (el.isIntersecting) {
 11 
      if (el.isIntersecting) {
18 
        setShow(true)
 12 
        setShow(true);
19 
 
 13 
 
20 
        once && observer.disconnect()
 14 
        once && observer.disconnect();
21 
      } else {
 15 
      } else {
22 
        !once && setShow(false)
 16 
        !once && setShow(false);
23 
      }
 17 
      }
24 
    }
 18 
    };
25 
 
 19 
 
26 
    const observer = new IntersectionObserver(onChange, {
 20 
    const observer = new IntersectionObserver(onChange, {
27 
      rootMargin
 21 
      rootMargin
28 
    })
 22 
    });
29 
 
 23 
 
30 
    if (element) observer.observe(element)
 24 
    if (fromRef.current) observer.observe(fromRef.current);
31 
 
 25 
 
32 
    return () => observer && observer.disconnect()
 26 
    return () => observer && observer.disconnect();
33 
  }, [externalRef, fromRef])
 27 
  }, [fromRef]);
34 
 
 28 
 
35 
  return [isNearScreen, fromRef]
 29 
  return [isNearScreen, fromRef];
36 
}
 30 
}