A helper function to support various React render prop use cases
npm install @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
If you're building React components using render props, this library aims to simplify various render prop use cases.
```
npm install @macklinu/render-props
See this CodeSandbox for an in-browser example.
See src/types/example.tsx for a TypeScript example and using the provided TypeScript types.
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`
{props.count}
)}
/>
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 => (
{props.count}
)}
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`
Using the component prop
{props.count}
)}
/>
Using the render prop
{props.count}
)}
/>
{props => (
Using the children prop
{props.count}
)}
* props: The props object from a React componentnewProps
* : 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`.
Thanks goes to these wonderful people (emoji key):
|
Macklin Underdown
💻 📖 ⚠️ |
| :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!