When

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

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

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

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

Props

Name	Type	Default	Description
children	React.ReactNode	-	조건이 true일 때 렌더링할 자식 컴포넌트
condition	boolean | (() => boolean)	-	렌더링 조건
fallback	React.ReactNode	undefined	조건이 false일 때 렌더링할 컴포넌트

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