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

<Parent render={props => <Child {...props} />} />

Function as Child Component

<Parent>{props => <Child {...props} />}</Parent>

Component Injection

<Parent component={Child} />

Usecase

render-props are 🔥 in react.

Many popular libraries (react-router, downshift, formik, etc...) are using it, and FaCC being the same thing is also popularly in use (react-motion, etc...).

Even the new react-context api is using it.

This module helps library authors provide both render-props and Function as Child Component to their users.

Installation

• npm

    npm i -D react-render-function

• yarn

    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.

The main component Counter 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