Flowr

Flowr provides a set of useful React components for controlling your render flow.

Installation

To add flowr to your application dependencies you just need to run:

npm install flowr -S

This will download flowr into your node_modules folder and then you can import any flowr component into your modules.

import { Maybe, Either, Await } from 'flowr'
// ...

Flowr is tree-shaking friendly. As long as you are using ES6 modules, your bundle will contain only the required flowr components. Read more about tree shaking

There are two categories of Components available: Conditionals and Schedulers

Read the docs

Conditionals

| Name | Props | Description | | ---------------------- | :----- | :---------------------------------------------------------------------------------------------------- | | Maybe | when | Renders it's children only if when is true | | Either | when | If when is true it renders the first child, otherwise it renders the second | | Flip | when | Flips the order of the first two children | | Reverse | when | Reverses the order of all its children | | Order | sort | Re-orders the children in the order provided through sort | | One | at | Renders only the child at the specified index | | Some | at | Renders only the children at the specified indices if they exist | | Constant | * | Will render only once, never updating the state of it's children (shouldComponentUpdate -> false) | | Pure | * | Will re-render only when the passed props have changed (PureComponent) | | Just | * | Just renders it's children, nothing special, good for dynamic rendering | | Nothing | * | Renders nothing |

Schedulers

| Name | Props | Description | | ---------------------- | :------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Await | for, tap, onPromise | Renders it's children when and only if the provided promise resolves. When used with a render prop, it will always apply the promise result (err, res) to the callback. It also accepts a function that returns a Promise | | Stream | * | Render-prop component that enables working with props streams | | Debounce | time, immediate | Renders it's children only after a certain amount of time has passed since the previous render. | | Delay | time | Renders it's children only after a certain amount of time has passed | | Throttle | time | Renders it's children at most once in the specified time interval. |