ddoronin/reoption

🐾 Declarative Option monad for React

Reoption

npm install reoption

Show me

Given a function that should find resource and return numeric id. If no results found it should return null or undefined.

findId: () => number;

Let's print results in JSX as usual:

{ findId() && <p>The id is "{findId()}"</p> }
{ !findId() && <p>Not found</p> }

This solution is extrmely popular in React world, but here is a list of problems:

1. Result 0 will be interpreted as false. It can be solved by adding more logic around, ending up with helper methods.

2. Extra calls of the findId() method. Can be solved by caching the returned value. That mean just adding one more variable.

3. Looks hucky from the very beginning. This is something personal :)

4. NOT a reusable code snippet mostly because of related helper functions from point #1 and cache #2.

With Match from reoption the same code will look cleaner and smarter. Check it out!

import { Match } from 'reoption';

<Match 
    option={findId}
    some={(id: number) => <p>The id is "{id}"</p>}
    none={<p>Not found</p>}
/>