SwitchCase

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

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

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

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface SwitchCaseProps<Case extends PropertyKey> {
  value: Case | null | undefined;
  caseBy: Record<Case, React.ReactNode>;
  defaultComponent?: React.ReactNode;
}

typescript

const SwitchCase: <Case extends PropertyKey>({
  caseBy,
  value,
  defaultComponent,
}: SwitchCaseProps<Case>) => 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>
  );
};