Show

Show is a component that shows or hides its children based on a condition.

インビジブルガール葉隠透

<Show when={true}>
  <Text>インビジブルガール 葉隠透</Text>
</Show>

Usage

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

import { Show } from "@/components/ui"

import { Show } from "@workspaces/ui"

<Show />

Render Conditionally

To conditionally render content, set the when prop to a boolean value.

インビジブルガール葉隠透

const [isVisible, setIsVisible] = useState(true)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      {isVisible ? "Hide" : "Show"} Content
    </Button>
    <Show when={isVisible}>
      <Text>インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

With Fallback

To render fallback content when the condition is false, use the fallback prop.

衣服

const [isVisible, setIsVisible] = useState(false)

return (
  <VStack>
    <Button onClick={() => setIsVisible(!isVisible)}>Toggle Content</Button>
    <Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
      <Text color="green.500">インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`children`	-	`ReactNodeOrFunction<Y>` The children to render if `when` is `true`
`fallback`	-	`ReactNode` The fallback content to render if `when` is `false`
`when`	-	`null \| Y` If `true`, it'll render the `children` prop

Similar Components

ClientOnly is a component that renders its children only on the client side.

For is a component used to loop over an array and render a component for each item.

Format is used to format dates, numbers, and bytes according to a specific locale.

Portal is a component that renders elements outside of the current DOM hierarchy.

Slot is a component that merges its props onto its immediate child.

Used By Components & Hooks

ClientOnly is a component that renders its children only on the client side.