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: Case,
  caseBy: Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>,
  defaultComponent: () => ReactElement | null
): ReactElement | null;

Parameters

• valuerequired · Case
  

  The value to compare against. The component associated with the matching key in caseBy will be rendered.

• caseByrequired · Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>
  

  An object that maps values to components to render. The keys represent possible values, and the values are functions returning the corresponding components.

• defaultComponent() => ReactElement | null
  

  The component to render if value does not match any key in caseBy.

Return Value

• ReactElement | null
  

  React component that conditionally renders based on cases.

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 />}
    />
  );
}