Getting started

Get started with Flowr

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

Conditionals

NamePropsDescription
MaybewhenRenders it's children only if when is true
EitherwhenIf when is true it renders the first child, otherwise it renders the second
FlipwhenFlips the order of the first two children
ReversewhenReverses the order of all its children
OrdersortRe-orders the children in the order provided through sort
OneatRenders only the child at the specified index
SomeatRenders 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

NamePropsDescription
Awaitfor, tap, onPromiseRenders 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
Debouncetime, immediateRenders it's children only after a certain amount of time has passed since the previous render.
DelaytimeRenders it's children only after a certain amount of time has passed
ThrottletimeRenders it's children at most once in the specified time interval.

Contribute on Github! Edit this section.