reoption

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:

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

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

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

• 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>}
/>