flowr

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.