flowr

declarative flow control components for React applications

Usage no npm install needed!

<script type="module">
  import flowr from 'https://cdn.skypack.dev/flowr';
</script>

README

Flowr

Build Status npm version npm downloads

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.