{"id":13481246,"url":"https://github.com/gnapse/render-props-compose","last_synced_at":"2025-05-05T21:15:39.679Z","repository":{"id":57353487,"uuid":"119716031","full_name":"gnapse/render-props-compose","owner":"gnapse","description":"Compose several nested render props components into a single one","archived":false,"fork":false,"pushed_at":"2018-06-08T22:07:55.000Z","size":91,"stargazers_count":45,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T21:15:36.628Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gnapse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-31T16:54:32.000Z","updated_at":"2024-06-01T10:00:32.000Z","dependencies_parsed_at":"2022-09-19T10:31:17.929Z","dependency_job_id":null,"html_url":"https://github.com/gnapse/render-props-compose","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnapse%2Frender-props-compose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnapse%2Frender-props-compose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnapse%2Frender-props-compose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnapse%2Frender-props-compose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gnapse","download_url":"https://codeload.github.com/gnapse/render-props-compose/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252577026,"owners_count":21770721,"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":[],"created_at":"2024-07-31T17:00:50.065Z","updated_at":"2025-05-05T21:15:39.657Z","avatar_url":"https://github.com/gnapse.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["Composition"],"readme":"# render-props-compose\n\nThis library makes it possible to combine `n` nested render-props components, each taking 1 argument, and build a single render prop component that takes `n` arguments. This allows you to flatten a deeply nested construct of render props. It composes your render props like you compose functions or HOCs.\n\nUsing this library you can turn this:\n\n```javascript\nconst App = () =\u003e (\n  \u003cCounter\u003e\n    {counterProps =\u003e (\n      \u003cTimer\u003e\n        {timerProps =\u003e (\n          \u003cMouse\u003e\n            {mouseProps =\u003e (\n              \u003cYourComponent\n                {...counterProps}\n                {...timerProps}\n                {...mouseProps}\n              /\u003e\n            )}\n          \u003c/Mouse\u003e\n        )}\n      \u003c/Timer\u003e\n    )}\n  \u003c/Counter\u003e\n);\n```\n\ninto this:\n\n```javascript\nconst App = () =\u003e (\n  \u003cComposed components={[Counter, Timer, Mouse]}\u003e\n    {(counterProps, timerProps, mouseProps) =\u003e (\n      \u003cYourComponent\n        {...counterProps}\n        {...timerProps}\n        {...mouseProps}\n      /\u003e\n    )}\n  \u003c/Composed\u003e\n);\n```\n\n## Demo\n\nThis repository includes a demo app, which you can run with the command `npm run start` or `yarn start`. You can also see the same demo running live [here](https://codesandbox.io/s/04w609rvz0).\n\n## Install\n\n```\nnpm install --save render-props-compose\n```\n\nor using yarn:\n\n```\nyarn add render-props-compose\n```\n\n## Usage\n\nImport the `Composed` component:\n\n```javascript\nimport { Composed } from 'render-props-compose';\n\nconst App = () =\u003e (\n  \u003cComposed components={[Mouse, Timer]}\u003e\n    {(mouse, timer) =\u003e ( ... )}\n  \u003c/Composed\u003e\n);\n```\n\nYou can also create an enhanced component using the `composed` function export:\n\n```javascript\nimport { composed } from 'render-props-compose';\n\nconst CounterWithTimer = composed(Counter, Timer);\n\nconst App = () =\u003e (\n  \u003cCounterWithTimer\u003e\n    {(counter, timer) =\u003e ( ... )}\n  \u003c/CounterWithTimer\u003e\n);\n```\n\n### Receiving named props\n\nIt might be preferrable to receive the combined props in a single object, instead of as a list of positional arguments to the render prop function. You can achieve this by passing the components to compose in an object with the keys that correspond to them in the resulting combined props:\n\n```javascript\nconst App = () =\u003e (\n  \u003cComposed\n    components={{\n      mouse: Mouse,\n      timer: Timer,\n      counter: Counter,\n    }}\n  \u003e\n    {({ mouse, timer, counter }) =\u003e ( ... )}\n  \u003c/Composed\u003e\n);\n\n// Using the composed function\nconst CounterAndTimer = composed({ myCounter: Counter, timer: Timer });\n\nconst App = () =\u003e (\n  \u003cCounterAndTimer\n    render={({ myCounter, timer }) =\u003e ( ... )\u003e}\n  /\u003e\n);\n```\n\n### Passing props to composed components\n\nYou can pass props to the composed components by referencing them as a React element, instead of just passing the reference to the component.\n\nFor instance, in the following example the timer is initialized with an interval of 1500 milliseconds:\n\n```javascript\nconst App = () =\u003e (\n  \u003cComposed components={[Counter, \u003cTimer interval={1500} /\u003e, Mouse]}\u003e\n    {(counterProps, timerProps, mouseProps) =\u003e (\n      \u003cYourComponent\n        {...counterProps}\n        {...timerProps}\n        {...mouseProps}\n      /\u003e\n    )}\n  \u003c/Composed\u003e\n);\n```\n\n### Customize the render prop name\n\nThis library works by default with the render prop passed as `children`, allowing you to nest the render prop within the opening and closing tags. You can customize what name to use by passing the `renderPropName` option. For instance, to allow it to work with the render prop passed as `render`, you can do the following:\n\n```javascript\n// Using the Composed component\nconst App = () =\u003e (\n  \u003cComposed\n    renderPropName=\"render\"\n    components={[Counter, Timer, Mouse]}\n    render={(counterProps, timerProps, mouseProps) =\u003e (\n      \u003cYourComponent\n        {...counterProps}\n        {...timerProps}\n        {...mouseProps}\n      /\u003e\n    )}\n  /\u003e\n);\n\n// Using the composed function\nconst CounterAndTimer = composed([Counter, Timer], { renderPropName: 'render' });\n\nconst App = () =\u003e (\n  \u003cCounterAndTimer\n    render={(counter, timer) =\u003e (\n      \u003cYourComponent\n        {...counter}\n        {...timer}\n      /\u003e\n    )}\n  /\u003e\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnapse%2Frender-props-compose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgnapse%2Frender-props-compose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnapse%2Frender-props-compose/lists"}