Presence

Used to animate the entry and exit of an element while controlled the render behavior

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        present={open}
        animationName={{ _open: "fade-in", _closed: "fade-out" }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Fade
        </Center>
      </Presence>
    </Stack>
  )
}

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.

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        present={open}
        animationName={{ _open: "fade-in", _closed: "fade-out" }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Fade
        </Center>
      </Presence>
    </Stack>
  )
}

Scale Fade

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

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        present={open}
        animationStyle={{ _open: "scale-fade-in", _closed: "scale-fade-out" }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Scale Fade
        </Center>
      </Presence>
    </Stack>
  )
}

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.

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        present={open}
        animationName={{
          _open: "slide-from-bottom, fade-in",
          _closed: "slide-to-bottom, fade-out",
        }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Slide Fade
        </Center>
      </Presence>
    </Stack>
  )
}

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.

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        position="fixed"
        bottom="0"
        insetX="0"
        present={open}
        animationName={{
          _open: "slide-from-bottom-full",
          _closed: "slide-to-bottom-full",
        }}
        animationDuration="moderate"
      >
        <Center p="10" roundedTop="md" layerStyle="fill.muted">
          Slide
        </Center>
      </Presence>
    </Stack>
  )
}

Lazy Mount

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

Check the DOM to see that the element not mounted initially

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"
import { Alert } from "@/components/ui/alert"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Alert title="Check the DOM to see that the element not mounted initially" />
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        lazyMount
        present={open}
        animationName={{ _open: "fade-in", _closed: "fade-out" }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Fade
        </Center>
      </Presence>
    </Stack>
  )
}

Unmount On Exit

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

Check the DOM to see that the element is removed when not present.

"use client"

import {
  Button,
  Center,
  Presence,
  Stack,
  useDisclosure,
} from "@chakra-ui/react"
import { Alert } from "@/components/ui/alert"

const Demo = () => {
  const { open, onToggle } = useDisclosure()
  return (
    <Stack gap="4">
      <Alert title="Check the DOM to see that the element is removed when not present." />
      <Button alignSelf="flex-start" onClick={onToggle}>
        Click Me
      </Button>
      <Presence
        unmountOnExit
        present={open}
        animationName={{ _open: "fade-in", _closed: "fade-out" }}
        animationDuration="moderate"
      >
        <Center p="10" layerStyle="fill.muted">
          Fade
        </Center>
      </Presence>
    </Stack>
  )
}

LocaleProvider

Portal