Utility function designed to create containers for your React components, following the smart/dumb component philosophy.
npm install react-simple-compose
The package default export is a compose function. It expects a composer function as its first argument and returns a container function.
import compose from 'react-simple-compose';
const composer = (cb, props) => {
/* do something with cb*/
}
const container = compose(composer);The composer function is called when the contained component is mounted and receives two arguments: a callback and the props passed to the container.
The callback is used to provide data to the component, even asynchronously.
const composer = cb => {
cb({ name: 'Lucas' });
setInterval(() => {
cb({ now: new Date() })
}, 1000);
/* Component gets a 'name' prop with value 'Lucas'
* and a 'now' prop that updates every second
*/
}There are two possible special states: loading and error. By default, the component doesn't get rendered in these states.
The callback can also be used to change the container state.
const composer = cb => {
// state defaults to 'loading'
http.get('/my/friends', (err, res) => {
// passing an error as first argument changes state to 'error'
if (err) cb(err)
// passing data removes any kind of special states
else cb({ friends: res })
});
}You can provide custom components to be rendered in special states. All rendered components get the same props: all the data and the error object.
const ErrorComponent = ({ error }) => (
<div style={{ color: 'red' }}>
{error.reason}
</div>
)
const container = compose(composer, {
loading: LoadingComponent,
error: ErrorComponent
})The generated container function expects a component and returns its contained version, that is, the component wrapped in the container that provides the props it needs.
This is sometimes called a smart component and that's what you should render to your view.
const container = compose(composer)
const Smart = container(dumb)
render((
<div id='named-clock'>
<Smart />
</div>
))MIT