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

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.

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.

PropTypeDefault
amount"any" | "all" | number | number[]any
rootReact.MutableRefObject
rootMarginstring
oncebooleanfalse

SpringProps

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

PropTypeDefault
fromobject
toobject | object[] | function
loopboolean | object | function
delaynumber | function
immediateboolean | function
resetboolean
reverseboolean
pauseboolean
cancelboolean | string | string[] | function
configobject | functionobject
eventsfunction

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!