{"id":13479504,"url":"https://github.com/pedronauck/react-adopt","last_synced_at":"2025-10-17T23:36:03.171Z","repository":{"id":31255337,"uuid":"127371474","full_name":"pedronauck/react-adopt","owner":"pedronauck","description":":sunglasses: Compose render props components like a pro","archived":false,"fork":false,"pushed_at":"2022-12-07T09:01:35.000Z","size":1059,"stargazers_count":1672,"open_issues_count":26,"forks_count":56,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-10-14T13:05:12.215Z","etag":null,"topics":["compose","react","render-props"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/pedronauck.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-30T02:31:22.000Z","updated_at":"2025-10-04T17:39:22.000Z","dependencies_parsed_at":"2023-01-14T18:45:14.513Z","dependency_job_id":null,"html_url":"https://github.com/pedronauck/react-adopt","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/pedronauck/react-adopt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-adopt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-adopt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-adopt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-adopt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedronauck","download_url":"https://codeload.github.com/pedronauck/react-adopt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedronauck%2Freact-adopt/sbom","scorecard":{"id":726238,"data":{"date":"2025-08-11","repo":{"name":"github.com/pedronauck/react-adopt","commit":"6ad801083eae3c29eb43d33e6da6f7c241891e18"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":1,"reason":"Found 5/30 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 5 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"88 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-mvjj-gqq2-p4hw","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T12:53:47.065Z","repository_id":31255337,"created_at":"2025-08-22T12:53:47.065Z","updated_at":"2025-08-22T12:53:47.065Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279123216,"owners_count":26108634,"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-10-15T02:00:07.814Z","response_time":56,"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":["compose","react","render-props"],"created_at":"2024-07-31T16:02:17.836Z","updated_at":"2025-10-17T23:36:03.156Z","avatar_url":"https://github.com/pedronauck.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","*.js","Components","⚛️ React","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["React","Composition","React-specific libs:"],"readme":":sunglasses: _**React Adopt -**_ Compose render props components like a pro\n\n[![GitHub release](https://img.shields.io/github/release/pedronauck/react-adopt.svg)]()\n[![Build Status](https://travis-ci.org/pedronauck/react-adopt.svg?branch=master)](https://travis-ci.org/pedronauck/react-adopt)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ebdcc3e942b14363a96438b41c770b32)](https://www.codacy.com/app/pedronauck/react-adopt?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=pedronauck/react-adopt\u0026utm_campaign=Badge_Grade)\n\n![](https://i.imgflip.com/27euu2.jpg)\n\n## 📜 Table of content\n\n- [Why](#--why)\n- [Solution](#--solution)\n- [Demos](#--demos)\n- [Usage](#--usage-demo)\n  - [Working with new Context api](#working-with-new-context-api)\n  - [Custom render and retrieving props from composed](#custom-render-and-retrieving-props-from-composed)\n  - [Mapping props from mapper](#mapping-props-from-mapper)\n  - [Using components on mapper](#using-components-on-mapper)\n  - [Leading with multiple params](#leading-with-multiple-params)\n  - [Typescript support](#typescript-support)\n  - [Inline composition](#inline-composition)\n\n## 🧐 \u0026nbsp; Why\n\n[Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecosystem, that's a fact. So, when you need to use more than one render props component together, this can be boring and generate something called a *\"render props callback hell\"*, like this:\n\n![Bad](https://i.imgur.com/qmk3Bk5.png)\n\n## 💡 \u0026nbsp; Solution\n\n* **Small**. 0.7kb minified!\n* **Extremely Simple**. Just a method!\n\nReact Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.\n\n## 📟 \u0026nbsp; Demos\n\n- [Basic example](https://codesandbox.io/s/vq1wl37m0y?hidenavigation=1)\n- [Todo App example using React Apollo](https://codesandbox.io/s/3x7n8wyp15?hidenavigation=1)\n- [Example with new Context API](https://codesandbox.io/s/qv3m6yk2n4?hidenavigation=1)\n\n## 💻 \u0026nbsp; Usage\n\nInstall as project dependency:\n\n```bash\n$ yarn add react-adopt\n```\n\nNow you can use React Adopt to compose your components. See below for an example using the awesome [react-powerplug](https://github.com/renatorib/react-powerplug):\n\n![Good](https://i.imgur.com/RXVlFwy.png)\n\n### Working with new Context api\n\nOne use case that React Adopt can fit perfectly is when you need to use [React's new context api](https://reactjs.org/docs/context.html) that use render props to create some context:\n\n```jsx\nimport React from 'react'\nimport { adopt } from 'react-adopt'\n\nconst ThemeContext = React.createContext('light')\nconst UserContext = React.createContext({ name: 'John' })\n\nconst Context = adopt({\n  theme: \u003cThemeContext.Consumer /\u003e,\n  user: \u003cUserContext.Consumer /\u003e,\n})\n\n\u003cContext\u003e\n  {({ theme, user }) =\u003e /* ... */}\n\u003c/Context\u003e\n```\n\nSee [this demo](https://codesandbox.io/s/qv3m6yk2n4?hidenavigation=1) for a better explanation.\n\n### Custom render and retrieving props from composed\n\nSome components don't use the `children` prop for render props to work. For cases like this, you can pass a function instead of a jsx element to your mapper. This function will receive a `render` prop that will be responsible for your render, the props passed on `Composed` component, and the previous values from each mapper. See an example:\n\n```jsx\nimport { adopt } from 'react-adopt'\nimport MyCustomRenderProps from 'my-custom-render-props'\n\nconst Composed = adopt({\n  custom: ({ render }) =\u003e \u003cMyCustomRenderProps render={render} /\u003e\n})\n\n\u003cComposed\u003e\n  {({ custom }) =\u003e (\n    \u003cdiv\u003e{custom.value}\u003c/div\u003e\n  )}\n\u003c/Composed\u003e\n```\n\nYou can also retrieve the properties passed to the composed component this way too:\n\n\n```jsx\nimport { adopt } from 'react-adopt'\nimport { Value } from 'react-powerplug'\n\nconst Composed = adopt({\n  greet: ({ initialGreet, render }) =\u003e (\n    \u003cValue initial={initialGreet}\u003e{render}\u003c/Value\u003e\n  )\n})\n\n\u003cComposed initialGreet=\"Hi\"\u003e\n  {({ greet }) =\u003e (\n    \u003cdiv\u003e{greet.value}\u003c/div\u003e\n  )}\n\u003c/Composed\u003e\n```\n\nAnd get previous mapper results as prop for compose:\n\n```jsx\nimport { adopt } from 'react-adopt'\n\nimport { User, Cart, ShippingRate } from 'my-containers'\n\nconst Composed = adopt({\n  cart: \u003cCart /\u003e,\n  user: \u003cUser /\u003e,\n  shippingRates: ({ user, cart, render }) =\u003e (\n    \u003cShippingRate zipcode={user.zipcode} items={cart.items}\u003e\n      {render}\n    \u003c/ShippingRate\u003e\n  )\n})\n\n\u003cComposed\u003e\n  {({ cart, user, shippingRates }) =\u003e /* ... */ }\n\u003c/Composed\u003e\n```\n\n### Mapping props from mapper\n\nSometimes, get properties from your mappers can be kind of boring depending on how nested the result from each mapper. To easily avoid deeply nested objects or combine your results, you can map the final results into a single object using the `mapProps` function as the second parameter.\n\n```js\nimport { adopt } from 'react-adopt'\nimport { Value } from 'react-powerplug'\n\nconst mapper = {\n  greet: \u003cValue initial=\"Hi\" /\u003e,\n  name: \u003cValue initial=\"John\" /\u003e,\n}\n\nconst mapProps = ({ greet, name }) =\u003e ({\n  message: `${greet.value} ${name.value}`,\n})\n\nconst Composed = adopt(mapper, mapProps)\n\nconst App = () =\u003e (\n  \u003cComposed\u003e\n    {({ message }) =\u003e /* ... */}\n  \u003c/Composed\u003e\n)\n```\n\nYou can do that using the `\u003cAdopt /\u003e` component as well:\n\n```js\nimport { Adopt } from 'react-adopt'\nimport { Value } from 'react-powerplug'\n\nconst mapper = {\n  greet: \u003cValue initial=\"Hi\" /\u003e,\n  name: \u003cValue initial=\"John\" /\u003e,\n}\n\nconst mapProps = ({ greet, name }) =\u003e ({\n  message: `${greet.value} ${name.value}`,\n})\n\nconst App = () =\u003e (\n  \u003cAdopt mapper={mapper} mapProps={mapProps}\u003e\n    {({ message }) =\u003e /* ... */}\n  \u003c/Adopt\u003e\n)\n```\n\n### Using components on mapper\n\nIf you want to use your component directly as mapper value you can do that. Some nice thing here is that all non-react static methods of your components will be hoisting for composed component:\n\n```jsx\nimport { React } from 'react'\nimport { adopt } from 'adopt'\nimport { Value } from 'react-powerplug'\n\nconst Greeter = ({ render, name }) =\u003e render(`Hi ${name.value}`)\n\nGreeter.sayHi = (name) =\u003e `Hi ${name}`\n\nconst Composed = adopt({\n  name: \u003cValue name=\"John\" /\u003e\n  greet: Greet\n})\n\nconsole.log(Composed.sayHi('John')) // Hi John\n\nconst App = () =\u003e (\n  \u003cComposed\u003e\n    {({ greet, name }) =\u003e /* ... */ }\n  \u003c/Composed\u003e\n)\n```\n\n### Leading with multiple params\n\nSome render props components return multiple arguments in the children function instead of a single one (see a simple example in the new [Query](https://www.apollographql.com/docs/react/essentials/queries.html#basic) and [Mutation](https://www.apollographql.com/docs/react/essentials/mutations.html) component from `react-apollo`). In this case, you can do an arbitrary render with `render` prop [using your map value as a function](#custom-render-and-retrieving-props-from-composed):\n\n```js\nimport { adopt } from 'react-adopt'\nimport { Mutation } from 'react-apollo'\n\nconst ADD_TODO = /* ... */\n\nconst addTodo = ({ render }) =\u003e (\n  \u003cMutation mutation={ADD_TODO}\u003e\n    {/* this is an arbitrary render where you will pass your two arguments into a single one */}\n    {(mutation, result) =\u003e render({ mutation, result })}\n   \u003c/Mutation\u003e\n)\n\nconst Composed = adopt({\n  addTodo,\n})\n\nconst App = () =\u003e (\n  \u003cComposed\u003e\n    {({ addTodo: { mutation, result } }) =\u003e /* ... */}\n  \u003c/Composed\u003e\n)\n```\n\nSee [this demo](https://codesandbox.io/s/3x7n8wyp15?hidenavigation=1) for a complete explanation about multiple params..\n\n### Typescript support\n\nReact Adopt has full typescript support when you need to type the composed component:\n\n```ts\nimport * as React from 'react'\nimport { adopt } from 'react-adopt'\nimport { Value } from 'react-powerplug'\n\ninterface RenderProps {\n  foo: { value: string }\n}\n\ninterface Props {\n  tor: string\n}\n\nconst foo = ({ tor, render }) =\u003e (\n  \u003cValue initial=\"foo\"\u003e{render}\u003c/Value\u003e\n)\n\nconst Composed = adopt\u003cRenderProps, Props\u003e({\n  foo,\n})\n\n\u003cComposed tor=\"tor\"\u003e\n  {({ foo, bar }) =\u003e (\n    \u003cdiv\u003e{foo.value}\u003c/div\u003e\n  )}\n\u003c/Composed\u003e\n```\n\n### Inline composition\n\nIf you dont care about [typings](#typescript-support) and need something more easy and quick, you can choose to use an inline composition by importing the `\u003cAdopt\u003e` component and passing your mapper as a prop:\n\n```js\nimport React from 'react'\nimport { Adopt } from 'react-adopt'\nimport { Value } from 'react-powerplug'\n\nconst mapper = {\n  greet: \u003cValue initial=\"Hi\" /\u003e,\n  name: \u003cValue initial=\"John\" /\u003e\n}\n\n\u003cAdopt mapper={mapper}\u003e\n  {({ greet, name }) =\u003e /* ... */}\n\u003c/Adopt\u003e\n```\n\n## 🕺 \u0026nbsp; Contribute\n\n1.  [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device\n2.  Install dependencies using Yarn: `yarn install`\n3.  Make the necessary changes and ensure that the tests are passing using `yarn test`\n4.  Send a pull request 🙌\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freact-adopt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedronauck%2Freact-adopt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedronauck%2Freact-adopt/lists"}