react 16.3 context api utils
npm install 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.
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 (
);
}
}
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 (
);
}
}
export default {
Provider: Provider,
Consumer: cx.Consumer
};
`
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 liketodos
//
// the render props will only get the field.
{({ todos, others }) => (
{todos.todos.map(todo =>
)}
);
const App = props => (
);
`
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);
`
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.