When

condition prop이 true면 자식 컴포넌트를 렌더링하고, false면 렌더링하지 않는 컴포넌트입니다.

condition prop으로 boolean을 반환하는 함수도 허용됩니다.

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>
    </>
  );
};