Function useInView

packages/core/src/hooks/useInView.ts:35–128

(
  props?: (() => UseSpringProps<any>) | IntersectionArgs,
  args?: IntersectionArgs
)

    : never
  : never
export function useInView<TElement extends HTMLElement>(
  props?: (() => UseSpringProps<any>) | IntersectionArgs,
  args?: IntersectionArgs
) {
  const [isInView, setIsInView] = useState(false)
  const ref = useRef<TElement>(undefined)

  const propsFn = is.fun(props) && props

  const springsProps = propsFn ? propsFn() : {}
  const { to = {}, from = {}, ...restSpringProps } = springsProps

  const intersectionArguments = propsFn ? args : props

  const [springs, api] = useSpring(() => ({ from, ...restSpringProps }), [])

  useIsomorphicLayoutEffect(() => {
    const element = ref.current
    const {
      root,
      once,
      amount = 'any',
      ...restArgs
    } = intersectionArguments ?? {}

    if (
      !element ||
      (once && isInView) ||
      typeof IntersectionObserver === 'undefined'
    )
      return

    const activeIntersections = new WeakMap<Element, VoidFunction>()

    const onEnter = () => {
      if (to) {
        // @ts-expect-error – TODO: fix this type error
        api.start(to)
      }

      setIsInView(true)

      const cleanup = () => {
        if (from) {
          api.start(from)
        }
        setIsInView(false)
      }

      return once ? undefined : cleanup
    }

    const handleIntersection: IntersectionObserverCallback = entries => {
      entries.forEach(entry => {
        const onLeave = activeIntersections.get(entry.target)

        if (entry.isIntersecting === Boolean(onLeave)) {
          return