Presence

Usage

import { Presence } from "@chakra-ui/react"

<Presence present={true}>
  <div>Presence content</div>
</Presence>

Think of Presence like the AnimatePresence component from Framer Motion, except that it's built for CSS animations instead.

The key things to note:

• the present prop is a boolean that controls the presence state of the component.
• the _open condition is used to style the open state.
• the _closed condition is used to style the closed state.

Examples

Fade

Setting the animation name to fade-in and fade-out, the component will animate the entry and exit of the element.

Scale Fade

Using the animation styles scale-fade-in and scale-fade-out, the component will animate the entry and exit of the element.

Slide Fade

Here's an example that uses the animation names slide-from-bottom and slide-to-bottom to animate the entry and exit of the element.

Slide

Here's an example that uses the animation names slide-from-bottom-full and slide-to-bottom-full to animate the entry and exit of the element.

Lazy Mount

Use the lazyMount prop to delay the mount of the component until it's present.

Unmount On Exit

Use the unmountOnExit prop to unmount the component when it's not present.