When

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

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

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

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

Usage

typescript

import { When } from '@modern-kit/react';

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

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

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

Example

Fallback