Show

Used to conditional render part of the view based on a condition.

"use client"

import { Button, Show, Stack } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [count, setCount] = useState(0)
  return (
    <Stack align="flex-start">
      <Show when={count > 3}>
        <div>My Content</div>
      </Show>
      <Button variant="outline" onClick={() => setCount(count + 1)}>
        Value: {count}
      </Button>
    </Stack>
  )
}

Usage

The Show component renders its children when the when value is truthy, otherwise it renders the fallback prop.

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

<Show when={...} fallback={...}>
  <div>Content</div>
</Show>

Examples

Fallback

Use the fallback prop to render a fallback component when the array is empty or undefined.

Not there yet. Keep clicking...

"use client"

import { Button, Show, Stack, Text } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [count, setCount] = useState(0)
  return (
    <Stack align="flex-start">
      <Show
        when={count > 3}
        fallback={<Text>Not there yet. Keep clicking...</Text>}
      >
        <div>Congrats! I'm here</div>
      </Show>
      <Button variant="outline" onClick={() => setCount(count + 1)}>
        Value: {count}
      </Button>
    </Stack>
  )
}

Render Prop

Use the children render prop to narrow the type of the when value and remove undefined | null

Value: 10

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

const Demo = () => {
  const value: number | undefined = 10
  return <Show when={value}>{(value) => <div>Value: {value}</div>}</Show>
}

Props

Prop	Default	Type
`when`		`T \| null \| undefined` If `true`, it'll render the `children` prop
`fallback`		`React.ReactNode` The fallback content to render if `when` is `false`

Portal

Visually Hidden