Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/donavon/render-props
Easily and reliably support Render Props, Component Injection, and Function as a Child
https://github.com/donavon/render-props
component component-injection function-as-child react reactjs render-prop render-props
Last synced: about 2 months ago
JSON representation
Easily and reliably support Render Props, Component Injection, and Function as a Child
- Host: GitHub
- URL: https://github.com/donavon/render-props
- Owner: donavon
- License: mit
- Created: 2018-01-21T19:37:58.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2018-03-20T01:50:30.000Z (almost 7 years ago)
- Last Synced: 2024-10-12T08:11:25.460Z (2 months ago)
- Topics: component, component-injection, function-as-child, react, reactjs, render-prop, render-props
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 83
- Watchers: 3
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# render-props
[](https://travis-ci.org/donavon/render-props)
[](https://www.npmjs.com/package/render-props)
[](https://coveralls.io/github/donavon/render-props?branch=master)
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 `import`ing 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 = () => (
Traditional Render Prop
(`Count = ${count} foo=${foo}`)
}
/>
Component Injection (SFC)
Using Component Injection (class)
);
```
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](http://americanexpress.io/faccs-are-an-antipattern/)
but I've shown the example for completeness.
## See it Live!
Here is a [CodeSandbox](https://codesandbox.io/s/32lz3w3wom)
with the sample component shown above running live.