npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

second-container

1.6.0 • Public • Published

Second Container

Build data-driven React components with a higher-order container that handles data fetching.

Installation

npm install --save second-container second-fetcher

Usage

import { Component, createElement } from 'react'
import containerFactory from 'second-container'
import Fetcher from 'second-fetcher'
 
const fetcher = new Fetcher()
const createContainer = containerFactory({
    fetcher,
    Component,
    createElement
})
 
const MyComponent = (props) => <div>{props.username}'s name is {props.user.name}</div>
 
const MyDataComponent = createContainer(MyComponent, {
  data: props => ({
    user: { // Will be available as the 'user' prop in MyComponent
      uri: `https://api.github.com/users/${props.username}`,
 
      // Optionally pass an array of keys to extract from the response. This is useful
      // to reduce how much of the response is serialised and sent to the client.
      pick: ['id''name''username']
    }
  })
})
 
// <MyDataComponent username="wildlyinaccurate" /> will render as <div>wildlyinaccurate's name is Joseph Wynn</div>

API

install

npm i second-container

Downloadsweekly downloads

16

version

1.6.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability