@macklinu/render-props

> A helper function to support various React render prop use cases


* Motivation
* Installation
* Example
* Usage
* API Reference
* renderProps(props: Object, newProps: Object): ReactElement
* Contributors

Motivation

If you're building React components using render props, this library aims to simplify various render prop use cases.

Installation

``
npm install @macklinu/render-props
`

Example

See this CodeSandbox for an in-browser example.

See src/types/example.tsx for a TypeScript example and using the provided TypeScript types.

Usage

Let's build a Counter component using a traditional render prop.

`js
import React from 'react'

class Counter extends React.Component {
state = { count: 0 }

render() {
return this.props.render({
count: this.state.count,
increment: this.increment,
decrement: this.decrement,
})
}

increment = () => {
this.setState(prevState => ({ count: prevState.count + 1 }))
}

decrement = () => {
this.setState(prevState => ({ count: prevState.count - 1 }))
}
}
`

This works well if you only support a render prop function:

`js
render={props => (


But what if you want to use a prop other than render? For example, a children function prop is popular alternative to render:

`js

{props => (


This is where @macklinu/render-props comes into play. It allows render props named component, render, and children (in that order), making it simpler for your React components to support common render prop APIs.

`js
import React from 'react'
import renderProps from '@macklinu/render-props'

class Counter extends React.Component {
state = { count: 0 }

render() {
return renderProps(this.props, {
count: this.state.count,
increment: this.increment,
decrement: this.decrement,
})
}

increment = () => {
this.setState(prevState => ({ count: prevState.count + 1 }))
}

decrement = () => {
this.setState(prevState => ({ count: prevState.count - 1 }))
}
}
`

And now you can use all cases:

`js


* props: The props object from a React component
* newProps: The props object passed into the render prop function (component, render, or children), which can be used by consumer components for rendering a React element.

Returns the React element returned from the component, render, or children prop. If none of those props are provided, returns null`.

Contributors

Thanks goes to these wonderful people (emoji key):

|
_{Macklin Underdown}
💻 📖 ⚠️ |
| :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!