react-render-function
Version:
render react component as function
106 lines (65 loc) • 4.72 kB
Markdown
[](https://standardjs.com)
[](https://github.com/prettier/prettier)
[](https://github.com/shrynx/react-render-function/blob/master/LICENSE)
[](https://unpkg.com/react-render-function/dist/)
[](https://unpkg.com/react-render-function/dist/)
[](https://unpkg.com/react-render-function/dist/)
[](https://github.com/facebook/jest)
[](https://circleci.com/gh/shrynx/react-render-function)
[](https://coveralls.io/github/shrynx/react-render-function?branch=master)
# react-render-function
> Allow using render props, Function as Child Component or component injection to render component
## Preface
> The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function
> -- https://reactjs.org/docs/render-props.html
---
> “Function as Child Component”s are components that receive a function as their child.
> -- https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9
Both `render-props` and `facc` are quite similar,
both the techniques use function in order to provide props from parent component to render a child component,
the only difference is how they provide access to the function.
### render-props
```javascript
<Parent render={props => <Child {...props} />} />
```
### Function as Child Component
```javascript
<Parent>{props => <Child {...props} />}</Parent>
```
### Component Injection
```javascript
<Parent component={Child} />
```
## Usecase
`render-props` are 🔥 in react.
Many popular libraries ([react-router](https://github.com/ReactTraining/react-router), [downshift](https://github.com/paypal/downshift), [formik](https://github.com/jaredpalmer/formik), etc...) are using it, and FaCC being the same thing is also popularly in use ([react-motion](https://github.com/chenglou/react-motion), etc...).
Even the new [react-context api](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) is using it.
This module helps library authors provide both `render-props` and `Function as Child Component` to their users.
## Installation
* npm
```sh
npm i -D react-render-function
```
* yarn
```sh
yarn add -D react-render-function
```
## Usage
`react-render-function` library exposes a single function which takes 2 arguments
* **ownProps** (simply provide `this.props` or `props` depending on the component)
* **childProps** (props that you want to pass to child component)
`ownProps` is used to determine whether a `component` prop, `render` prop or `children` is provided.
`childProps` are props passed to the child component.
return the `renderFunction` with appropriate arguments in the **render** method of your component.
The implementation of really tiny (basically 3 lines), and weighs **286B** gzipped.
**Note**
* If provided both component prop and child as function, component prop takes priority and a warning is logged (only during development)
* If provided both component prop and render prop, component prop takes priority and a warning is logged (only during development)
* If provided both render prop and child as function, render prop takes priority and a warning is logged (only during development)
* If provided all 3, component prop, render prop and child as function, component prop takes priority and a warning is logged (only during development)
## Examples
Check the [examples folder](./examples).
The main component [Counter](./examples/Counter.js) is implemented with `react-render-function`
and the subsequent components demonstrate usage of render-props and Function as Child Component.
You can also play with the example
[](https://codesandbox.io/s/31wm8n4wzp)