useInView

A helpful utility hook tracking the visibility of an element in the viewport. Using the native IntersectionObserver, you can respond either to a boolean signifying that the element has "intersected" or instead pass it a function returning SpringValues to animate the element upon intersection.

Usage

Passing nothing or an object

Not passing a function as the first argument the hook therefore assumes you're passing arguments to intialize the IntersectionObserver. If you do pass a function, this argument becomes the second expected (see below).

tsx

import { useInView, animated } from '@react-spring/web'

function MyComponent() {
  const [ref, inView] = useInView()

  return <animated.div ref={ref}>{inView ? 'Hello World' : null}</animated.div>
}

Passing a function

:::warning You must use the to and from prop to define your animation when returning it from the function. Passing regular props that typically "become" SpringValues will not work. :::

tsx

import { useInView, animated } from '@react-spring/web'

function MyComponent() {
  const [ref, springs] = useInView(
    () => ({
      from: {
        opacity: 0,
        y: 100,
      },
      to: {
        opacity: 1,
        y: 0,
      },
    }),
    {
      rootMargin: '-40% 0%',
    }
  )

  return (
    <animated.div ref={ref} style={springs}>
      Hello World
    </animated.div>
  )
}

References

import { TablesConfiguration } from '../components/Tables/TablesConfig' import { DEFAULT_CONFIG_DATA, USE_INVIEW_INTERSECTION_ARGS, } from '../data/fixtures'

IntersectionArgs

The below table describes the IntersectionArgs object the hook accepts.

SpringProps

The reference below describes the return value of the optional function argument.

<TablesConfiguration data={DEFAULT_CONFIG_DATA.filter(cell => cell[0]?.label !== 'ref')} />

Typescript

tsx

interface IntersectionArgs
  extends Omit<IntersectionObserverInit, 'root' | 'threshold'> {
  root?: React.MutableRefObject<HTMLElement>
  once?: boolean
  amount?: 'any' | 'all' | number | number[]
}

function useInView(
  args?: IntersectionArgs
): [ref: RefObject<any>, isInView: boolean]

function useInView<Props extends object>(
  props: () => Props & Valid<Props, UseSpringProps<Props>>,
  args?: IntersectionArgs
): [ref: RefObject<any>, springs: SpringValues]

Where ConfigObject is described above

Examples

import { ExampleGrid } from '../components/Grids/ExampleGrid'

Can't find what you're looking for? Check out all our examples!