IfElse

IfElse 컴포넌트는 주어진 조건에 따라 두 가지 컴포넌트 중 하나를 렌더링하는 간단한 도구입니다. 이 컴포넌트는 condition이라는 property를 통해 조건을 지정하고, 조건이 참(true)이면 truthyComponent를, 거짓(false)이면 falsyComponent를 렌더링합니다.

condition property는 단순한 boolean값 뿐만 아니라, boolean값을 반환하는 함수도 허용됩니다. 이 경우, 컴포넌트는 해당 함수를 호출하여 조건을 평가합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

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

interface IfElseProps {
  condition: Condition;
  truthyComponent: React.ReactNode;
  falsyComponent: React.ReactNode;
}

const IfElse: ({
  condition,
  truthyComponent,
  falsyComponent,
}: IfElseProps) => JSX.Element;

Usage

typescript

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

const Example = () => {
  const [state, setState] = useState<boolean>(false);
  return (
    <>
      <button onClick={() => setState(!state)}>Toggle Button</button>
      <IfElse 
        condition={state}
        truthyComponent={<h1>true component</h1>}
        falsyComponent={<h1>false component</h1>}
      />
    </>
  );
}

Example

false component