react-adopt

:sunglasses: React Adop - Compose render props components like a pro

🧐   Why

Render Props 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".

💡   Solution

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.

💻   Usage

Install as project dependency:

$ yarn add react-adopt

Then you can use the method to compose your components

import React from 'react'
import { render } from 'react-dom'
import { adopt } from 'react-adopt'

import { Filter } from './my-awesome-filter-component'

const Composed = adopt({
  kids: <Filter list={people} by={p => p.age < 18} />,
  adults: <Filter list={people} by={p => p.age >= 18} />
})

const App = () => (
  <Composed>
    {({ kids, adults }) => (
      <div>
        <ul>{kids.map(p => <li>{p.name}</li>)}</ul>
        <ul>{adults.map(p => <li>{p.name}</li>)}</ul>
      </div>
    )}
  </Composed>
)

🕺   Contribute

• Fork this repository to your own GitHub account and then clone it to your local device
• Install dependencies using Yarn: yarn install
• Make the necessary changes and ensure that the tests are passing using yarn test
• Send a pull request 🙌