SwitchCase

Switch 문을 컴포넌트 형태로 사용할 수 있는 컴포넌트입니다.

cases에는 key(condition):value(component) 형태의 프로퍼티를 갖는 객체를 넘겨주고, condition props에 매칭되는 value(컴포넌트)를 렌더링합니다.

cases에 매칭되는 condition이 없을 때 임시로 보여줄 수 있는 defaultCaseComponent를 props로 넘겨줄 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type Component = Nullable<React.ReactNode>;

interface SwitchCaseProps<Condition extends string | number> {
  condition: Condition | null | undefined;
  cases: Partial<Record<Condition, Component>>;
  defaultCaseComponent?: Component;
}

const SwitchCase: <Condition extends string | number>({
  condition,
  cases,
  defaultCaseComponent,
}: SwitchCaseProps<Condition>) => JSX.Element;

Usage

typescript

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


const Example = () => {
  const [condition, setCondition] = useState(1);

  return (
    <div>
      <div>
        <button onClick={() => setCondition(1)}>Change to case 1</button>
        <button onClick={() => setCondition(2)}>Change to case 2</button>
        <button onClick={() => setCondition(3)}>Change to case 3</button>
      </div>

      <SwitchCase
        condition={condition}
        cases={{
          1: <h3>Case No.1</h3>,
          2: <h3>Case No.2</h3>,
          3: <h3>Case No.3</h3>,
        }}
      />
    </div>
  );
};

Case No.1