		@@ -1,2 +0,2 @@
		:sunglasses: _React Adop -_ Compose render props components like a pro
		:sunglasses: _React Adopt -_ Compose render props components like a pro

		@@ -11,10 +11,12 @@ [![GitHub release](https://img.shields.io/github/release/pedronauck/react-adopt.svg)]()

		[Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecossystem, that's a fact. So, when you need to use more than one render props component together, this can be borring and generate something like a "render hell".
		[Render Props](https://reactjs.org/docs/render-props.html) are the new hype of React's ecossystem, 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 that:

		![Bad](https://i.imgur.com/qmk3Bk5.png)

		## 💡   Solution

		* Small. 0.7kb minified!
		* Extremelly Simple. Just a method!
		* Extremely Simple. Just a method!

		React Adopt it's just a simple method that you can compose your components and return all props in a function by mapping each child prop returned by your component.
		React Adopt is just a simple method that you can compose your components and return all props in a function by mapping each child prop returned by your component.

		@@ -29,12 +31,16 @@ ## 💻   Usage ([demo](https://codesandbox.io/s/vq1wl37m0y?hidenavigation=1))

		Then you can use the method to compose your components. See above an example using the awesome library [react-powerplug](https://github.com/renatorib/react-powerplug):
		Now you can use adopt to compose your components. See above an example using the awesome [react-powerplug](https://github.com/renatorib/react-powerplug):

		![Good](https://i.imgur.com/RXVlFwy.png)

		### Custom render and retrieving props from composed

		Some components don't use the `children` property as render props. For cases like that, you can pass a function as mapper value that will return your component. This function will receive as props the `render` method, the props passed on `Composed` component and the previous values from each mapper. See an example:

		```js
		import React from 'react'
		import { adopt } from 'react-adopt'
		import { Value } from 'react-powerplug'
		import MyCustomRenderProps from 'my-custom-render-props'

		const Composed = adopt({
		greet: <Value initial="Hello" />,
		name: <Value initial="John" />,
		custom: ({ render }) => <MyCustomRenderProps render={render} />
		})
		@@ -44,4 +50,4 @@
		<Composed>
		{({ greet, name }) => (
		<div>{greet.value} {name.value}</div>
		{({ custom }) => (
		<div>{custom.value}</div>
		)}
		@@ -52,2 +58,24 @@ </Composed>

		And as I said above, you can retrieve the properties passed to the composed component using that way too:


		```js
		import { adopt } from 'react-adopt'
		import { Value } from 'react-powerplug'

		const Composed = adopt({
		greet: ({ initialGreet, render }) => (
		<Value initial={initialGreet}>{render}</Value>
		)
		})

		const App = () => (
		<Composed initialGreet="Hi">
		{({ greet }) => (
		<div>{greet.value}</div>
		)}
		</Composed>
		)
		```

		## 🕺   Contribute
		@@ -54,0 +82,0 @@

tslint.json

		@@ -14,2 +14,3 @@ {
		"no-shadowed-variable": false,
		"max-classes-per-file": false,

		@@ -16,0 +17,0 @@ // Recommended built-in rules

src/index.test.tsx

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

react-adopt - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics