render-props


TL;DR

* This package is for component authors.
* It allows you to easily and reliably support Render Props, Component Injection, AND Function as a Child.
* Get increased performance from your SFCs while
respecting the component's defaultProps.

Install

``bash
$ npm i --save render-props
`

API

Simply import from render-props using ES6.

`js
import renderProps from 'render-props';
`

This will import the renderProps function which takes two parameters.

`js
renderProps(componentOrFunction, props)
`

* componentOrFunction - The first parameter is whatever was passed
to your component in this.props.render (or whatever you call your prop).

* props - The second parameter is a props object.
This will be spread to the function or component.

Usage

Let's say that you authored or are authoring a component that takes a render prop (Render Props)
or a Component (Component Injection). There is some overhead required to support both.

This package will allow you to support both Render Props and Component Injection with zero effort.

What does this package offer over doing the work yourself?

If you support Component Injection, this package will check to see if the component
is a Stateless Functional Component (SFC) and, if so, will call it directly
for improved performance.

Another benefit is that Render Props can now have defaultProps.
Because, let's face it, a render prop is really just the same as a SFC.


Let's take the following component. It takes a prop named render.
By simply importing the render-props package, you can now
accept a function, a SFC, or a class component.
Almost like magic! 🎩

`js
import renderProps from 'render-props';

class MyComponent extends Component {
state = {};

componentDidMount() {
this.timer = setInterval(() => {
const currentCount = this.state.count || 0;
this.setState({ count: currentCount + 1 });
}, 5000);
}

componentWillUnmount() {
clearInterval(this.timer);
}

render() {
return renderProps(this.props.render, this.state);
}
}
`

You can use any of the following and they will all render properly.

`js
const RenderCountSFC = ({ count, foo }) => (
Count = ${count} foo=${foo}
);
RenderCountSFC.defaultProps = {
foo: 'foo',
count: 0,
};

class RenderCount extends Component {
render() {
const { count, foo } = this.props;
return (
Count = ${count} foo=${foo}
);
}
}
RenderCount.defaultProps = {
foo: 'foo',
count: 0,
};

const App = () => (



);
`

This will work no matter what you pass in the render prop.
You can pass a function, a Stateless Functional Component (SFC), or a class component.
In any case, it will be called to do the rendering.

Plus, if you pass a SFC, it will be rendered by calling it directly.
This is a huge performance boost over using JSX/React.createElement.

_[Note: Starting with version 1.1.0, SFCs that specify propTypes will be rendered as Components
in order to take advantage of prop validation.]_

This helper will also merge in any defaultProps that your component might be using.

Support Function as a Child too!

If you would also like to support Function as a Child
you can change the example code above like this.

`js
render() {
const { children, render = children } = this.props;
return renderProps(render, this.state);
}
``

It's good to note that I appall this pattern
but I've shown the example for completeness.

See it Live!

Here is a CodeSandbox
with the sample component shown above running live.