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).

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

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.

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

IntersectionArgs

The below table describes the IntersectionArgs object the hook accepts.

Prop	Type	Default
`amount`	`"any" \| "all" \| number \| number[]`	`any`
`root`	`React.MutableRefObject`	–
`rootMargin`	`string`	–
`once`	`boolean`	`false`
`threshold`	`number \| number[]`	–

SpringProps

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

Prop	Type	Default
`from`	`object`	–
`to`	`object \| object[] \| function`	–
`loop`	`boolean \| object \| function`	–
`delay`	`number \| function`	–
`immediate`	`boolean \| function`	–
`reset`	`boolean`	–
`reverse`	`boolean`	–
`pause`	`boolean`	–
`cancel`	`boolean \| string \| string[] \| function`	–
`config`	`object \| function`	`object`
`events`	`function`	–

Typescript

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

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