react-context-api
!!!The library is not stable now!!!
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.
// todos.jsximport createContext Component from 'react'const cx = ; { ; thisstate = todos: actions: addTodo: thisaddTodo ; } { this; }; { return <cx.Provider =>thispropschildren</cx.Provider> ; } Provider: Provider Consumer: cxConsumer; // other.jsximport createContext Component from 'react'const cx = ; { ; thisstate = other: actions: otherAction: thisotherAction ; } { // do something... }; { return <cx.Provider =>thispropschildren</cx.Provider> ; } Provider: Provider Consumer: cxConsumer;
Render Props
Inject context to your App by ContextProvider
and consume by ContextConsumer
import createContextAPI from 'react-context-api';import todos from './todos';import others from './others'; const ContextProvider ContextConsumer = ; const Child = // you can specific fields by `contextToRenderProps` prop like // <ContextConsumer contextToRenderProps={['todos']}> // the render props will only get the `todos` field. <ContextConsumer> todos others <div> <ul>todostodos</ul> <button =>ADD</button> </div> </ContextConsumer>; const App = <ContextProvider> <Child /> <ContextProvider/>;
HOC
If you prefer HOC styles, you can use withContextProvider
and withContextConsumer
.
You can use render props api and HOC api together.
const withContextProvider withContextConsumer = ; const Child = todos others <div> <ul>todostodos</ul> <button =>ADD</button> </div>; const App = ;
API Reference
createContextAPI(contextList: Object) => ({ContextProvider, ContextConsumer, withContextProvider, withContextConsumer, getContextConsumer})
contextList
must be a object which value is a context pair ({ Provider, Consumer }
):
import createContext Component from 'react'const cx = ; { ; thisstate = ; } { return <cx.Provider =>thispropschildren</cx.Provider> ; }const contextPair Provider: Provider Consumer: cx.Consumer }; const contextList = contextName: contextPair
A render-props api which provider the context into your App.
You can get your context in your component anywhere through <ContextConsumer />
API.
Props
- contextToRenderProps<string[]>: specific fields that you want to consume. If no
contextToRenderProps
is supplied orcontextToRenderProps
is an empty array, it will return all context instead.
withContextProvider(Component) => WrapperedComponent
Same as <ContextProvider/>
, but use HOC styling. Inject the context into Component
.
withContextConsumer(contextToRenderProps: string[]) => (Component) => WrapperedComponent
Same as <ContextConsumer />
, but use HOC styling. The specific fields will be injected as props into your Component
.
getContextConsumer(field: string[]) => ContextConsumerWithoutContextToRenderProps
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 <ContextConsumer />
component with specific context and no contextToRenderProps
prop.