Presence - Chakra Ui

Usage

jsx

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

jsx

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

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

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

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.

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.

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

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