Documentation

Documentation

React

useInView

useInView

useInView is a tiny (0.6kb) hook that detects when the provided element is within the viewport. It can be used with any React element.

const ref = useRef(null)
const isInView = useInView(ref)

return <div ref={ref} />

Usage

Import useInView from Motion:

import { useInView } from "motion/react"

useInView can track the visibility of any HTML element. Pass a ref object to both useInView and the HTML element.

function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref)

  return <div ref={ref} />
}

While the element is outside the viewport, useInView will return false. When it moves inside the view, it'll re-render the component and return true.

Effects

useInView is vanilla React state, so firing functions when isInView changes is a matter of passing it to a useEffect.

useEffect(() => {
  console.log("Element is in view: ", isInView)
}, [isInView])

Options

useInView can accept options to define how the element is tracked within the viewport.

const isInView = useInView(ref, { once: true })

root

By default, useInView will track the visibility of an element as it enters/leaves the window viewport. Set root to be the ref of a scrollable parent, and it'll use that element to be the viewport instead.

function Carousel() {
  const container = useRef(null)
  const ref = useRef(null)
  const isInView = useInView({ root: container })
  
  return (
    <div ref={container} style={{ overflow: "scroll" }}>
      <div ref={ref} />
    </div>
  )
}

margin

Default: "0px"

A margin to add to the viewport to change the detection area. Use multiple values to adjust top/right/bottom/left, e.g. "0px -20px 0px 100px".

const isInView = useInView({
  margin: "0px 100px -50px 0px"
})

]Note: For browser security reasons, margin won't take affect within cross-origin iframes unless root is explicitly defined.

once

Default: false

If true, once an element is in view, useInView will stop observing the element and always return true.

const isInView = useInView(ref, { once: true })

amount

Default: "some"

The amount of an element that should enter the viewport to be considered "entered". Either "some", "all" or a number between 0 and 1.

Example

A Motion+ membership will give you early access to features & content, access to our private Github and Discord, and more.

It's a one-time fee that grants lifetime access. No subscription necessary!

MOTION+

Introducing Cursor

Cursor is a creative cursor component for React, that makes it super easy to make custom cursor and follow cursor effects.


Hover over these examples to check out some of what it can do:

Custom cursor

Follow with spring

Multicursor

?

?