Get unlimited public & private packages + team-based management with npm Teams.Learn more »

second-container

1.7.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

5

Version

1.7.0

License

MIT

Unpacked Size

4.76 kB

Total Files

7

Last publish

Collaborators

  • avatar