Rerender is a set of pure components intent on replacing libraries such as lodash during rendering. It might be useful to think of it as recompose for render props.
npm install --save @rubixibuc/rerender
import React from 'react'
import _ from 'lodash';
const component = ({ items }) => (
<React.Fragment>
{_.map(items, (item) => <span>{item.name}</span>)}
</React.Fragment>
);
import React from 'react';
import * as R from 'rerender';
const component = ({ items }) => (
<R.Map items={items}>
{item => <span>{item}</span>}
</R.Map>
);
HOCs should not be used for every problem and neither should render props. Render props are best suited for pure transformations in the ui while HOCs are best suited for container logic. High order container components would be a more appropriate name for them.
This library is under active development and more utility components will be developed. Currently a few have been released to exemplify the pattern.
<R.Map
items={array}>
{(element: any, index: number, items: array) => node}
</R.Map>
<R.Filter
filter={(element: any, index: number, items: array) => bool}
items={array}>
{array => node}
</R.Filter>
<R.Reduce
initial={any = {}}
items={array}
reducer={(accumulator: any, currentValue: any, currentIndex: number, items: array) => accumulator: any}>
{(accumulator: any) => node}
</R.Reduce>
<R.Find
items={array}
predicate={func}>
{(found: any) => node}
</R.Find>
- If condition resolves to true, all child True nodes will be rendered. Otherwise, all child False nodes will be rendered.
<R.Branch
condition={bool | () => bool}>
<R.True>
{node}
</R.True>
<R.False>
{node}
</R.False>
</R.Branch>
- Matcher is used to compare expression and Test children's value properties. All children for which it returns true will be rendered.
<R.Match
expression={any | () => any}
matcher={(expression, value) => bool = (expression, value) => expresion === value}>
<R.Test
value={any | () => any}>
{node}
</R.Test>
</R.Match>
Nesting these components is the whole idea! More are coming!