When

If condition prop is true, the child component is rendered; if false, the component is not rendered.

A function that returns a boolean as a condition prop is also allowed.

Interface

type Condition = boolean | (() => boolean);

interface WhenProps {
  condition: Condition;
  fallback?: React.ReactNode;
}

const When: ({
  children,
  condition,
  fallback,
}: PropsWithChildren<WhenProps>) => JSX.Element;

Usage

import { When } from '@devgrace/react';
import { Button } from '@devgrace/ui';

const Example = () => {
  const [state, setState] = useState(false);

  return (
    <>
      <Button onClick={() => setState(!state)}>Toggle Button</Button>

      <When condition={state}>
        <h1>Render</h1>
      </When>
    </>
  );
};