{"id":16427077,"url":"https://github.com/donavon/render-props","last_synced_at":"2025-11-05T03:02:28.455Z","repository":{"id":57353489,"uuid":"118367223","full_name":"donavon/render-props","owner":"donavon","description":"Easily and reliably support Render Props, Component Injection, and Function as a Child","archived":false,"fork":false,"pushed_at":"2018-03-20T01:50:30.000Z","size":51,"stargazers_count":83,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-04-01T23:23:01.123Z","etag":null,"topics":["component","component-injection","function-as-child","react","reactjs","render-prop","render-props"],"latest_commit_sha":null,"homepage":"","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/donavon.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-21T19:37:58.000Z","updated_at":"2023-04-19T18:47:17.000Z","dependencies_parsed_at":"2022-09-19T10:31:24.054Z","dependency_job_id":null,"html_url":"https://github.com/donavon/render-props","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/donavon/render-props","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Frender-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Frender-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Frender-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Frender-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/donavon","download_url":"https://codeload.github.com/donavon/render-props/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/donavon%2Frender-props/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267451203,"owners_count":24089297,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["component","component-injection","function-as-child","react","reactjs","render-prop","render-props"],"created_at":"2024-10-11T08:11:29.244Z","updated_at":"2025-11-05T03:02:23.393Z","avatar_url":"https://github.com/donavon.png","language":"JavaScript","readme":"# render-props\n[![Build Status](https://travis-ci.org/donavon/render-props.svg?branch=master)](https://travis-ci.org/donavon/render-props)\n[![npm version](https://img.shields.io/npm/v/render-props.svg)](https://www.npmjs.com/package/render-props)\n[![Coverage Status](https://coveralls.io/repos/github/donavon/render-props/badge.svg?branch=master)](https://coveralls.io/github/donavon/render-props?branch=master)\n\nTL;DR\n\n* This package is for component authors.\n* It allows you to easily and reliably support Render Props, Component Injection, AND Function as a Child.\n* Get increased performance from your SFCs while\nrespecting the component's `defaultProps`.\n\n## Install\n```bash\n$ npm i --save render-props\n```\n\n## API\n\nSimply `import` from `render-props` using ES6.\n\n```js\nimport renderProps from 'render-props';\n```\n\nThis will import the `renderProps` function which takes two parameters.\n\n```js\nrenderProps(componentOrFunction, props)\n```\n\n* `componentOrFunction` - The first parameter is whatever was passed\nto your component in `this.props.render` (or whatever you call your prop).\n\n* `props` - The second parameter is a `props` object.\nThis will be spread to the function or component.\n\n## Usage\n\nLet's say that you authored or are authoring a component that takes a `render` prop (Render Props)\nor a `Component` (Component Injection). There is some overhead required to support both.\n\nThis package will allow you to support both Render Props and Component Injection with zero effort.\n\nWhat does this package offer over doing the work yourself?\n\nIf you support Component Injection, this package will check to see if the component\nis a Stateless Functional Component (SFC) and, if so, will call it directly\nfor improved performance.\n\nAnother benefit is that Render Props can now have `defaultProps`. \nBecause, let's face it, a render prop is really just the same as a SFC.\n\n\nLet's take the following component. It takes a prop named `render`.\nBy simply `import`ing the `render-props` package, you can now\naccept a function, a SFC, or a class component. \nAlmost like magic! 🎩\n\n```js\nimport renderProps from 'render-props';\n\nclass MyComponent extends Component {\n  state = {};\n\n  componentDidMount() {\n    this.timer = setInterval(() =\u003e {\n      const currentCount = this.state.count || 0;\n      this.setState({ count: currentCount + 1 });\n    }, 5000);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.timer);\n  }\n\n  render() {\n    return renderProps(this.props.render, this.state);\n  }\n}\n```\n\nYou can use any of the following and they will all render properly.\n\n```js\nconst RenderCountSFC = ({ count, foo }) =\u003e ( \n  `Count = ${count} foo=${foo}`\n);\nRenderCountSFC.defaultProps = {\n  foo: 'foo',\n  count: 0,\n};\n\nclass RenderCount extends Component {\n  render() {\n    const { count, foo } = this.props;\n    return (\n      `Count = ${count} foo=${foo}`\n    );\n  }\n}\nRenderCount.defaultProps = {\n  foo: 'foo',\n  count: 0,\n};\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003eTraditional Render Prop\u003c/h2\u003e\n    \u003cMyComponent\n      render={\n        ({ count, foo }) =\u003e (`Count = ${count} foo=${foo}`)\n      }\n    /\u003e\n\n    \u003ch2\u003eComponent Injection (SFC)\u003c/h2\u003e\n    \u003cMyComponent render={RenderCountSFC} /\u003e\n\n    \u003ch2\u003eUsing Component Injection (class)\u003c/h2\u003e\n    \u003cMyComponent render={RenderCount} /\u003e\n  \u003c/div\u003e\n);\n```\n\nThis will work no matter what you pass in the `render` prop.\nYou can pass a function, a Stateless Functional Component (SFC), or a class component.\nIn any case, it will be called to do the rendering.\n\nPlus, if you pass a SFC, it will be rendered by calling it directly.\nThis is a huge performance boost over using JSX/`React.createElement`.\n\n_[Note: Starting with version 1.1.0, SFCs that specify `propTypes` will be rendered as Components\nin order to take advantage of prop validation.]_\n\nThis helper will also merge in any `defaultProps` that your component might be using.\n\n## Support Function as a Child too!\n\nIf you would also like to support Function as a Child\nyou can change the example code above like this.\n\n```js\nrender() {\n  const { children, render = children } = this.props;\n  return renderProps(render, this.state);\n}\n```\n\nIt's good to note that I [appall this pattern](http://americanexpress.io/faccs-are-an-antipattern/)\nbut I've shown the example for completeness.\n\n## See it Live!\n\nHere is a [CodeSandbox](https://codesandbox.io/s/32lz3w3wom)\nwith the sample component shown above running live.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Frender-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonavon%2Frender-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonavon%2Frender-props/lists"}