Compose several nested render props components into a single one
npm install render-props-composeThis library makes it possible to combine n nested render-props components, each taking 1 argument, and build a single render prop component that takes n arguments. This allows you to flatten a deeply nested construct of render props. It composes your render props like you compose functions or HOCs.
Using this library you can turn this:
``javascript`
const App = () => (
{counterProps => (
{timerProps => (
{mouseProps => (
{...timerProps}
{...mouseProps}
/>
)}
)}
)}
)
into this:
`javascript`
const App = () => (
{(counterProps, timerProps, mouseProps) => (
{...timerProps}
{...mouseProps}
/>
)}
)
This repository includes a demo app, which you can run with the command npm run start or yarn start. You can also see the same demo running live here.
`
npm install --save render-props-compose
or using yarn:
`
yarn add render-props-compose
Import the Composed component:
`javascript
import { Composed } from 'render-props-compose';
const App = () => (
{(mouse, timer) => ( ... )}
)
`
You can also create an enhanced component using the composed function export:
`javascript
import { composed } from 'render-props-compose';
const CounterWithTimer = composed(Counter, Timer);
const App = () => (
{(counter, timer) => ( ... )}
)
`
It might be preferrable to receive the combined props in a single object, instead of as a list of positional arguments to the render prop function. You can achieve this by passing the components to compose in an object with the keys that correspond to them in the resulting combined props:
`javascript`
const App = () => (
mouse: Mouse,
timer: Timer,
counter: Counter,
}}
>
{({ mouse, timer, counter }) => ( ... )}
)
You can pass props to the composed components by referencing them as a React element, instead of just passing the reference to the component.
For instance, in the following example the timer is initialized with an interval of 1500 milliseconds:
`javascript`
{(counterProps, timerProps, mouseProps) => (
{...timerProps}
{...mouseProps}
/>
)}
This library works by default with the render prop passed as children, allowing you to nest the render prop within the opening and closing tags. You can customize what name to use by passing the renderPropName option. For instance, to allow it to work with the render prop passed as render, you can do the following:
`javascript
// Using the Composed component
const App = () => (
components={[Counter, Timer, Mouse]}
render={(counterProps, timerProps, mouseProps) => (
{...timerProps}
{...mouseProps}
/>
)}
/>
)
// Using the composed function
const CounterAndTimer = composed([Counter, Timer], { renderPropName: 'render'});
const App = () => (
render={(counter, timer) => (
{...timer}
/>
)}
/>
);
``