Show

Showは、条件に基づいて子要素を表示または非表示にするコンポーネントです。

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

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

使い方

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

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

import { Show } from "@workspaces/ui"

<Show />

条件付きでレンダリングする

コンテンツを条件付きでレンダリングする場合は、whenに真偽値を設定します。

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

const [isVisible, setIsVisible] = useState(true)

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

フォールバックを使う

フォールバックを使う場合は、fallbackにReactNodeを設定します。

衣服

const [isVisible, setIsVisible] = useState(false)

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

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`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

類似のコンポーネント

ClientOnlyは、クライアントサイドでのみ子要素をレンダリングするコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

Slotは、propsを子要素にマージするコンポーネントです。

Forは配列をループして各アイテムに対してコンポーネントをレンダリングするために使用されるコンポーネントです。

Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。

使用されているコンポーネント・フック

ClientOnlyは、クライアントサイドでのみ子要素をレンダリングするコンポーネントです。