react-context-api

> !!!The library is not stable now!!!

alt="npm version"
src="https://badge.fury.io/js/react-context-api.svg"
/>





alt="license mit"
src="https://img.shields.io/badge/License-MIT-blue.svg"
/>


alt="circle ci"
src="https://circleci.com/gh/purepennons/react-context-api/tree/master.svg?style=svg"
/>

This is a React 16.3 context api wrapper. The purpose of the library is giving a convenience way to use Context API as a react global store.

Basic Usage

Create your context (store) like below format.
It is good to define by features.

``jsx
// todos.jsx
import { createContext, Component } from 'react'
const cx = createContext({});
class Provider extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
actions: {
addTodo: this.addTodo
}
};
}

addTodo = todo => {
this.setState(prev => ({todos: prev.todos.concat(todo)}));
};

render(){
return (
{this.props.children}
);
}
}

export default {
Provider: Provider,
Consumer: cx.Consumer
};

// other.jsx
import { createContext, Component } from 'react'
const cx = createContext({});
class Provider extends Component {
constructor(props) {
super(props);
this.state = {
other: [],
actions: {
otherAction: this.otherAction
}
};
}

otherAction = () => {
// do something...
};

render(){
return (
{this.props.children}
);
}
}

export default {
Provider: Provider,
Consumer: cx.Consumer
};
`

$3

Inject context to your App by ContextProvider and consume by ContextConsumer

`jsx
import createContextAPI from 'react-context-api';
import todos from './todos';
import others from './others';

const { ContextProvider, ContextConsumer } = createContextAPI({ todos, others });

const Child = props => (
// you can specific fields by contextToRenderProps prop like
//
// the render props will only get the todos field.

{({ todos, others }) => (


)}

);

const App = props => (



);
`

$3

If you prefer HOC styles, you can use withContextProvider and withContextConsumer.

> You can use render props api and HOC api together.

`jsx
const { withContextProvider, withContextConsumer } = createContextAPI({
todos,
others
});

const Child = withContextConsumer(['todos', 'others'])(({ todos, others }) => (


));

const App = withContextProvider(Child);
`

API Reference

$3


contextList must be a object which value is a context pair ({ Provider, Consumer }):
`jsx
import { createContext, Component } from 'react'
const cx = createContext({});
class Provider extends Component {
constructor(props) {
super(props);
this.state = {};
}
render(){
return (
{this.props.children}
);
}
}
const contextPair {
Provider: Provider,
Consumer: cx.Consumer
};

const contextList = { contextName: contextPair }
`

$3

A render-props api which provider the context into your App.

$3

You can get your context in your component anywhere through API.
#### Props
- contextToRenderProps: specific fields that you want to consume. If no contextToRenderProps is supplied or contextToRenderProps is an empty array, it will return all context instead.

$3

Same as , but use HOC styling. Inject the context into Component.

$3

Same as , but use HOC styling. The specific fields will be injected as props into your Component.

$3

If you prefer get Consumer with specific field statically instead of changing with contextToRenderProps props dynamically. You can use getContextConsumer directly. It will return a component with specific context and no contextToRenderProps` prop.