Show

Show는 when이 true로 resolve되면 children을, 아니면 fallback을 렌더링합니다.

import { Show } from '@ilokesto/utilinent';

<Show when={user} fallback={<LoginLink />}>
  {(currentUser) => <UserMenu user={currentUser} />}
</Show>

프로퍼티

Prop	Type	설명
`when`	`T` 또는 `T[]`	조건 값입니다. Array는 모든 item이 truthy일 때만 true입니다.
`children`	`ReactNode` 또는 function	`when`이 true일 때 렌더링됩니다. Function children은 truthy value를 받습니다.
`fallback`	`ReactNode`	`when`이 false일 때 렌더링됩니다. 기본값은 `null`입니다.

<Show when={[session, permissions.canEdit]} fallback={<ReadOnly />}>
  <Editor />
</Show>

Array condition은 every(Boolean)을 사용하므로 “모든 요구사항이 있어야 함”을 간결하게 표현할 수 있습니다.

<Show.section when={open} className="panel" fallback={<Skeleton />}>
  <Settings />
</Show.section>

Show.section은 <section>을 만들고 DOM props/ref를 전달한 뒤 resolved branch를 element 안에 넣습니다.