Skip to main content

Quickstart

  1. Add it to your project:
npm install react-matchez
yarn add react-matchez
  1. Define what is the shape of the object you wanna branch on:
export type Data =
  | { type: 'text'; content?: string }
  | { type: 'img'; src?: string };

export type Result =
  | { type: 'ok'; data: Data }
  | { type: 'cancel'; error?: Error };

export const result: Result = { type: 'ok', data: { type: 'img' } };
  1. Start using getPatternMatch (or usePatternMatch):
import { getPatternMatch } from 'react-matchez';

const { Match, With, Otherwise } = getPatternMatch<Result, false>();

const Component = () => {
  return (
    <Match value={result}>
      <With type="cancel">Cancel</With>
      <With type="ok" data={{ type: 'text' }}>
        OK - Text
      </With>
      <With type="ok" data={{ type: 'img' }}>
        OK - Image
      </With>
      <Otherwise>Fallback</Otherwise>
    </Match>
  );
};