{"id":19949324,"url":"https://github.com/macklinu/render-props","last_synced_at":"2025-05-03T18:32:33.119Z","repository":{"id":57127302,"uuid":"118517420","full_name":"macklinu/render-props","owner":"macklinu","description":"A helper function to support various React render prop use cases","archived":false,"fork":false,"pushed_at":"2018-02-02T00:04:06.000Z","size":343,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-01-10T00:10:09.564Z","etag":null,"topics":["react","render-props"],"latest_commit_sha":null,"homepage":"https://npm.im/@macklinu/render-props","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/macklinu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-22T21:26:56.000Z","updated_at":"2019-10-25T06:09:51.000Z","dependencies_parsed_at":"2022-08-31T17:20:32.659Z","dependency_job_id":null,"html_url":"https://github.com/macklinu/render-props","commit_stats":null,"previous_names":[],"tags_count":2,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macklinu%2Frender-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macklinu%2Frender-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macklinu%2Frender-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macklinu%2Frender-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macklinu","download_url":"https://codeload.github.com/macklinu/render-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224370112,"owners_count":17299968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","render-props"],"created_at":"2024-11-13T00:44:49.550Z","updated_at":"2024-11-13T00:44:50.164Z","avatar_url":"https://github.com/macklinu.png","language":"JavaScript","readme":"# @macklinu/render-props\n\n\u003e A helper function to support various React render prop use cases\n\n[![npm](https://img.shields.io/npm/v/@macklinu/render-props.svg)](https://npm.im/@macklinu/render-props)\n[![Build Status](https://travis-ci.org/macklinu/render-props.svg?branch=master)](https://travis-ci.org/macklinu/render-props)\n[![license](https://img.shields.io/github/license/macklinu/render-props.svg)](https://github.com/macklinu/render-props/blob/master/LICENSE)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n* [Motivation](#motivation)\n* [Installation](#installation)\n* [Example](#example)\n* [Usage](#usage)\n* [API Reference](#api-reference)\n  * [`renderProps(props: Object, newProps: any): ReactElement`](#renderpropsprops-object-newprops-any-reactelement)\n* [Contributors](#contributors)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Motivation\n\nIf 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.\n\n## Installation\n\n```\nnpm install @macklinu/render-props\n```\n\n## Example\n\nSee [this CodeSandbox](https://codesandbox.io/s/zw08xmk5yl) for an in-browser example.\n\nSee [`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.\n\n## Usage\n\nLet's build a `Counter` component using a traditional render prop.\n\n```js\nimport React from 'react'\n\nclass Counter extends React.Component {\n  state = { count: 0 }\n\n  render() {\n    return this.props.render({\n      count: this.state.count,\n      increment: this.increment,\n      decrement: this.decrement,\n    })\n  }\n\n  increment = () =\u003e {\n    this.setState(prevState =\u003e ({ count: prevState.count + 1 }))\n  }\n\n  decrement = () =\u003e {\n    this.setState(prevState =\u003e ({ count: prevState.count - 1 }))\n  }\n}\n```\n\nThis works well if you only support a `render` prop function:\n\n```js\n\u003cCounter\n  render={props =\u003e (\n    \u003cdiv\u003e\n      \u003cspan\u003e{props.count}\u003c/span\u003e\n      \u003cbutton onClick={props.decrement}\u003e-\u003c/button\u003e\n      \u003cbutton onClick={props.increment}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  )}\n/\u003e\n```\n\nBut 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`:\n\n```js\n\u003cCounter\u003e\n  {props =\u003e (\n    \u003cdiv\u003e\n      \u003cspan\u003e{props.count}\u003c/span\u003e\n      \u003cbutton onClick={props.decrement}\u003e-\u003c/button\u003e\n      \u003cbutton onClick={props.increment}\u003e+\u003c/button\u003e\n    \u003c/div\u003e\n  )}\n\u003c/Counter\u003e\n```\n\nThis 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.\n\n```js\nimport React from 'react'\nimport renderProps from '@macklinu/render-props'\n\nclass Counter extends React.Component {\n  state = { count: 0 }\n\n  render() {\n    return renderProps(this.props, {\n      count: this.state.count,\n      increment: this.increment,\n      decrement: this.decrement,\n    })\n  }\n\n  increment = () =\u003e {\n    this.setState(prevState =\u003e ({ count: prevState.count + 1 }))\n  }\n\n  decrement = () =\u003e {\n    this.setState(prevState =\u003e ({ count: prevState.count - 1 }))\n  }\n}\n```\n\nAnd now you can use all cases:\n\n```js\n\u003cdiv\u003e\n  \u003cCounter\n    component={props =\u003e (\n      \u003cdiv\u003e\n        \u003ch2\u003e\n          Using the \u003ccode\u003ecomponent\u003c/code\u003e prop\n        \u003c/h2\u003e\n        \u003cspan\u003e{props.count}\u003c/span\u003e\n        \u003cbutton onClick={props.decrement}\u003e-\u003c/button\u003e\n        \u003cbutton onClick={props.increment}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    )}\n  /\u003e\n  \u003cCounter\n    render={props =\u003e (\n      \u003cdiv\u003e\n        \u003ch2\u003e\n          Using the \u003ccode\u003erender\u003c/code\u003e prop\n        \u003c/h2\u003e\n        \u003cspan\u003e{props.count}\u003c/span\u003e\n        \u003cbutton onClick={props.decrement}\u003e-\u003c/button\u003e\n        \u003cbutton onClick={props.increment}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    )}\n  /\u003e\n  \u003cCounter\u003e\n    {props =\u003e (\n      \u003cdiv\u003e\n        \u003ch2\u003e\n          Using the \u003ccode\u003echildren\u003c/code\u003e prop\n        \u003c/h2\u003e\n        \u003cspan\u003e{props.count}\u003c/span\u003e\n        \u003cbutton onClick={props.decrement}\u003e-\u003c/button\u003e\n        \u003cbutton onClick={props.increment}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/Counter\u003e\n\u003c/div\u003e\n```\n\n## API Reference\n\n### `renderProps(props: Object, newProps: any): ReactElement`\n\n* `props`: The [`props`](https://reactjs.org/docs/react-component.html#props) object from a React component\n* `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.\n\nReturns the React element returned from the `component`, `render`, or `children` prop. If none of those props are provided, returns `null`.\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\n\u003c!-- prettier-ignore --\u003e\n| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/2344137?v=4\" width=\"100px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMacklin Underdown\u003c/b\u003e\u003c/sub\u003e](http://macklin.underdown.me)\u003cbr /\u003e[💻](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\") |\n| :---: |\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacklinu%2Frender-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmacklinu%2Frender-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmacklinu%2Frender-props/lists"}