Show

Generic component used to conditionally render part of the view.

Renders children when when is truthy. When falsy, the behaviour depends on the mode prop:

---

mode="unmount" (default)

Children are fully removed from the DOM. fallback is rendered instead (if provided), otherwise null. State inside the subtree is lost on hide and reset on re-show.

---

mode="hidden"

Children always remain in the DOM, preserving their state and avoiding remount costs. Hiding is achieved via display: none:

• Native DOM children (e.g. <div>, <span>): the hidden HTML attribute is injected directly onto the root element via cloneElement. No wrapper element is introduced. fallback is rendered alongside the hidden children regardless of when.
• Custom component children: a <div style={{ display: "none" }}> wrapper is introduced only when when is falsy. When when is truthy the wrapper is absent and children are rendered unwrapped, so the layout is unaffected in the visible state. fallback is rendered alongside when when is falsy.

---

mode="visibility"

Children always remain in the DOM. Hiding preserves the layout space occupied by the element:

• Native DOM children: visibility: hidden is merged into the root element's inline style via cloneElement. No wrapper is introduced. fallback is rendered alongside when when is falsy.
• Custom component children: a wrapper <div> with display: contents (visible) or display: none (hidden) is always present in the DOM to preserve component state across visibility changes. ⚠️ Layout limitation: display: contents is incompatible with visibility: hidden, so layout space is not preserved for custom components — the element is fully removed from flow when hidden, identical to mode="hidden". To get true visibility: hidden behaviour, wrap the custom component in a native element (e.g. <div><MyComponent /></div>) so that Show can apply visibility: hidden via cloneElement directly on the native wrapper.

Demo

INFO

The component has a state boolean variable show updated by a button element and uses Show generic component to conditional render a p element. If show is true, a p element with Shown text value is shown otherwise is shown a p element with Hidden text value.

Loading demo…

Show source code

import { useReducer } from "react";
import { Show } from "../../..";

export default function ShowComponent() {
	const [show, setShow] = useReducer(t => !t, false);

	return <>
		<button onClick={setShow}>{show ? "hide" : "show"}</button>
		<Show when={show} fallback={<p>hidden</p>}>
			<p>Shown</p>
		</Show>
	</>
}

Types

ShowProps

• @template T - The type of the when value. When truthy, children are rendered; otherwise fallback is shown.

Props accepted by the Show component.

Property	Type	Required	Description
when	T \| boolean \| undefined \| null	✓	The condition that controls rendering. When truthy, children are displayed; when falsy (false, null, or undefined), fallback is rendered instead (or nothing if fallback is omitted).
fallback	ReactNode		Optional content rendered when when is falsy. Accepts any valid React node. When omitted, nothing is rendered in the falsy case.
mode	"unmount" \| "hidden" \| "visibility"		Controls how the component behaves when when is falsy: - "unmount" (default) — children are fully removed from the DOM. The fallback prop is rendered instead (if provided). - "hidden" — children remain in the DOM. When when is falsy, the hidden HTML attribute is applied directly to the children's root element via cloneElement. When when is truthy the attribute is removed. - "visibility" — children remain in the DOM. When when is falsy, display: none !important CSS rule is applied directly to the children'root element via cloneElement. When when is truthy the rule is removed.