Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/macklinu/render-props
A helper function to support various React render prop use cases
https://github.com/macklinu/render-props
react render-props
Last synced: 2 months ago
JSON representation
A helper function to support various React render prop use cases
- Host: GitHub
- URL: https://github.com/macklinu/render-props
- Owner: macklinu
- License: mit
- Created: 2018-01-22T21:26:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-02T00:04:06.000Z (almost 7 years ago)
- Last Synced: 2024-01-10T00:10:09.564Z (about 1 year ago)
- Topics: react, render-props
- Language: JavaScript
- Homepage: https://npm.im/@macklinu/render-props
- Size: 335 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @macklinu/render-props
> A helper function to support various React render prop use cases
[](https://npm.im/@macklinu/render-props)
[](https://travis-ci.org/macklinu/render-props)
[](https://github.com/macklinu/render-props/blob/master/LICENSE)
[](https://github.com/prettier/prettier)
[](https://github.com/semantic-release/semantic-release)
[](#contributors)
* [Motivation](#motivation)
* [Installation](#installation)
* [Example](#example)
* [Usage](#usage)
* [API Reference](#api-reference)
* [`renderProps(props: Object, newProps: any): ReactElement`](#renderpropsprops-object-newprops-any-reactelement)
* [Contributors](#contributors)
## Motivation
If you're building React components using [render props](https://reactjs.org/docs/render-props.html), this library aims to simplify various render prop use cases.
## Installation
```
npm install @macklinu/render-props
```
## Example
See [this CodeSandbox](https://codesandbox.io/s/zw08xmk5yl) for an in-browser example.
See [`src/types/example.tsx`](https://github.com/macklinu/render-props/blob/master/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
(
{props.count}
-
+
)}
/>
```
But what if you want to use a prop [other than `render`](https://reactjs.org/docs/render-props.html#using-props-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}
-
+
)}
```
## API Reference
### `renderProps(props: Object, newProps: any): ReactElement`
* `props`: The [`props`](https://reactjs.org/docs/react-component.html#props) object from a React component
* `newProps`: The new props 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](https://github.com/kentcdodds/all-contributors#emoji-key)):
| [
Macklin Underdown](http://macklin.underdown.me)
[💻](https://github.com/macklinu/render-props/commits?author=macklinu "Code") [📖](https://github.com/macklinu/render-props/commits?author=macklinu "Documentation") [⚠️](https://github.com/macklinu/render-props/commits?author=macklinu "Tests") |
| :---: |
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!