---
meta:
  title: useInView | React Spring
  'og:title': useInView | React Spring
  'twitter:title': useInView | React Spring
  description: API documentation for the useInView utility hook in React Spring.
  'og:description': API documentation for the useInView utility hook in React Spring.
  'twitter:description': API documentation for the useInView utility hook in React Spring.
  'og:url': https://www.react-spring.dev/docs/utilities/use-in-view
  'twitter:url': https://www.react-spring.dev/docs/utilities/use-in-view
sidebar_position: 5
isNew: true
---

import { formatFrontmatterToRemixMeta } from '../helpers/meta'

export const meta = formatFrontmatterToRemixMeta(frontmatter)

# useInView

A helpful utility hook tracking the visibility of an element in the viewport. Using the native [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API),
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.

<TablesConfiguration data={USE_INVIEW_INTERSECTION_ARGS} />

### 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](#reference)

## Examples

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

<ExampleGrid sandboxTitles={['Popup Modal']} />

Can't find what you're looking for? Check out all our [examples!](/examples)
