npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-adopt

v0.6.0

Published

- [Why](#--why) - [Solution](#--solution) - [Demos](#--demos) - [Usage](#--usage-demo) - [Working with new Context api](#working-with-new-context-api) - [Custom render and retrieving props from composed](#custom-render-and-retrieving-props-from-composed)

Downloads

51,144

Readme

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

GitHub release Build Status Codacy Badge

📜 Table of content

🧐   Why

Render Props 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:

Bad

💡   Solution

  • Small. 0.7kb minified!
  • Extremely Simple. Just a method!

React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.

📟   Demos

💻   Usage

Install as project dependency:

$ yarn add react-adopt

Now you can use React Adopt to compose your components. See below for an example using the awesome react-powerplug:

Good

Working with new Context api

One use case that React Adopt can fit perfectly is when you need to use React's new context api that use render props to create some context:

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

const ThemeContext = React.createContext('light')
const UserContext = React.createContext({ name: 'John' })

const Context = adopt({
  theme: <ThemeContext.Consumer />,
  user: <UserContext.Consumer />,
})

<Context>
  {({ theme, user }) => /* ... */}
</Context>

See this demo for a better explanation.

Custom render and retrieving props from composed

Some 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:

import { adopt } from 'react-adopt'
import MyCustomRenderProps from 'my-custom-render-props'

const Composed = adopt({
  custom: ({ render }) => <MyCustomRenderProps render={render} />
})

<Composed>
  {({ custom }) => (
    <div>{custom.value}</div>
  )}
</Composed>

You can also retrieve the properties passed to the composed component this way too:

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

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

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

And get previous mapper results as prop for compose:

import { adopt } from 'react-adopt'

import { User, Cart, ShippingRate } from 'my-containers'

const Composed = adopt({
  cart: <Cart />,
  user: <User />,
  shippingRates: ({ user, cart, render }) => (
    <ShippingRate zipcode={user.zipcode} items={cart.items}>
      {render}
    </ShippingRate>
  )
})

<Composed>
  {({ cart, user, shippingRates }) => /* ... */ }
</Composed>

Mapping props from mapper

Sometimes, 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.

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

const mapper = {
  greet: <Value initial="Hi" />,
  name: <Value initial="John" />,
}

const mapProps = ({ greet, name }) => ({
  message: `${greet.value} ${name.value}`,
})

const Composed = adopt(mapper, mapProps)

const App = () => (
  <Composed>
    {({ message }) => /* ... */}
  </Composed>
)

You can do that using the <Adopt /> component as well:

import { Adopt } from 'react-adopt'
import { Value } from 'react-powerplug'

const mapper = {
  greet: <Value initial="Hi" />,
  name: <Value initial="John" />,
}

const mapProps = ({ greet, name }) => ({
  message: `${greet.value} ${name.value}`,
})

const App = () => (
  <Adopt mapper={mapper} mapProps={mapProps}>
    {({ message }) => /* ... */}
  </Adopt>
)

Leading with multiple params

Some render props components return multiple arguments in the children function instead of a single one (see a simple example in the new Query and Mutation component from react-apollo). In this case, you can do an arbitrary render with render prop using your map value as a function:

import { adopt } from 'react-adopt'
import { Mutation } from 'react-apollo'

const ADD_TODO = /* ... */

const addTodo = ({ render }) => (
  <Mutation mutation={ADD_TODO}>
    {/* this is an arbitrary render where you will pass your two arguments into a single one */}
    {(mutation, result) => render({ mutation, result })}
   </Mutation>
)

const Composed = adopt({
  addTodo,
})

const App = () => (
  <Compose>
    {({ addTodo: { mutation, result } }) => /* ... */}
  </Compose>
)

See this demo for a complete explanation about multiple params..

Typescript support

React Adopt has full typescript support when you need to type the composed component:

import * as React from 'react'
import { adopt } from 'react-adopt'
import { Value } from 'react-powerplug'

interface RenderProps {
  foo: { value: string }
}

interface Props {
  tor: string
}

const foo = ({ tor, render }) => (
  <Value initial="foo">{render}</Value>
)

const Composed = adopt<RenderProps, Props>({
  foo,
})

<Composed tor="tor">
  {({ foo, bar }) => (
    <div>{foo.value}</div>
  )}
</Composed>

Inline composition

If you dont care about typings and need something more easy and quick, you can choose to use an inline composition by importing the <Adopt> component and passing your mapper as a prop:

import React from 'react'
import { Adopt } from 'react-adopt'
import { Value } from 'react-powerplug'

const mapper = {
  greet: <Value initial="Hi" />,
  name: <Value initial="John" />
}

<Adopt mapper={mapper}>
  {({ greet, name }) => /* ... */}
</Adopt>

🕺   Contribute

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