react-match-case

Components allowing you to use pattern matching in react, without any hassle.

This package uses package matchto (link: https://www.npmjs.com/package/matchto). For matchto utility functions, import { utils } from package.

Example (from unit tests)

const rendered = renderer.create(
    <Match item="Hello world" kind="all">
        <Case pattern={/^Hello/}>
            1{" "}
        </Case>
        <Case pattern="Nope">
            2{" "}
        </Case>
        <Case pattern="Hello world">
            3
        </Case>
    </Match>
);
expect(rendered.toJSON()?.toString()).toBe("1, ,3");

Example of delayed evaluation (useful for null checks)

const arrays = [
    [1, 2, 3],
    null,
];
const rendered = renderer.create(
    <>
        <Match item={arrays[0]}>
            <Case pattern={null}>
                null
            </Case>
            <Case pattern={[]}>
                {() => arrays[0]!.length}
            </Case>
        </Match>
        <Match item={arrays[1]}>
            <Case pattern={null}>
                null
            </Case>
            <Case pattern={[]}>
                {() => arrays[1]!.length}
            </Case>
        </Match>
    </>
);
expect(rendered.toJSON()?.toString()).toBe("3,null");

Example of one-line pattern matching using Pattern component

const rendered = renderer.create(
    <>
        <Pattern item="Hello world" to={/^Hello/}>
            1{" "}
        </Pattern>
        <Pattern item="Hello world" to="Nope">
            2{" "}
        </Pattern>
        <Pattern item="Hello world" to="Hello world">
            3
        </Pattern>
    </>
);
expect(rendered.toJSON()?.toString()).toBe("1, ,3");

Example of using prolog-like cut (if one case is true don't evaluate the rest)

const rendered = renderer.create(
    <Match item={{ a: 5, b: 10 }} kind="all">
        <Case pattern={{ a: 5, b: 10 }} cut>
            1{" "}
        </Case>
        <Case pattern={{ a: 5 }}>
            2{" "}
        </Case>
    </Match>
);
expect(rendered.toJSON()?.toString()).toBe("1, ");

Example of end-tail recursion with exact match (two objects exact equality)

const rendered = renderer.create(
    <Match item={[1, 2, 3, 4]}>
        <Case pattern={[]} exact></Case>
        <Case pattern={[utils.Any]} rematch={item => item.slice(1)}>
            {(items: number[]) => items[0]}
        </Case>
    </Match>
);
expect(rendered.toJSON()?.toString()).toBe("1,2,3,4");

Example of using negation

const rendered = renderer.create(
    <Match item="Hello world">
        <Case pattern={Number} not>
            1{" "}
        </Case>
        <Case pattern={String} not>
            2{" "}
        </Case>
    </Match>
);
expect(rendered.toJSON()?.toString()).toBe("1, ");

Example of guard conditions

const rendered = renderer.create(
    <Match item="Hello world">
        <Case pattern={String} guard={s => s.length > 5}>
            1{" "}
        </Case>
        <Case pattern={String} guard={s => s.length <= 5}>
            2{" "}
        </Case>
    </Match>
);
expect(rendered.toJSON()?.toString()).toBe("1, ");

Footer

If you have any ideas on how to improve this package, or have discovered any bugs, please fill out an issue or pull request.