SwitchCase.md

SwitchCase

SwitchCase is a component that allows you to declaratively render components based on a given value, similar to a switch-case statement. It is useful when you need to conditionally render different components depending on a specific state.

Interface

function SwitchCase(
  value: string | number | boolean,
  caseBy: Record<string | number | boolean, () => JSX.Element>,
  defaultComponent: () => JSX.Element
): JSX.Element;

Parameters

Return Value

Example

function App() {
  return (
    <SwitchCase
      value={status}
      // Renders TypeA, TypeB, or TypeC based on the status value.
      caseBy={{
        a: () => <TypeA />,
        b: () => <TypeB />,
        c: () => <TypeC />,
      }}
      // Renders Default when the status value does not match any case.
      defaultComponent={() => <Default />}
    />
  );
}