🚀 react-contextual is a small (less than 1KB) helper around React 16s new context api
MIT License
npm install react-contextual
Click this link for a detailed explanation.
Examples: Counter | Global setState | Async actions |Memoization/Reselect | Multiple stores | External store
Pass a store
(which stores some state and actions to update the state) to Provider. Then receive the props in the store either by using a HOC or render-props.
import { Provider, Subscribe } from 'react-contextual'
const store = {
count: 0,
up: () => state => ({ count: state.count + 1 }),
down: () => state => ({ count: state.count - 1 }),
}
const App = () => (
<Provider {...store}>
<Subscribe>
{props => (
<div>
<h1>{props.count}</h1>
<button onClick={props.up}>Up</button>
<button onClick={props.down}>Down</button>
</div>
)}
</Subscribe>
</Provider>
)
import { Provider, subscribe } from 'react-contextual'
const View = subscribe()(props => (
<div>
<h1>{props.count}</h1>
<button onClick={props.up}>Up</button>
<button onClick={props.down}>Down</button>
</div>
))
const App = () => (
<Provider {...store}>
<View />
</Provider>
)
@subscribe()
class View extends React.PureComponent {
// ...
}
If you declare your store like above it becomes the default internal context, and is available by default to all subscribers. There is no need to explicitely refer to it when you subscribe to it.
When you need your store to be "external" so that you can refer to it and/or change its props from anywhere, you can declare it via createStore. This also comes in handy when you need multiple stores.
There are a few key differences:
store
propertysubscribe
or the to
prop in Subscribe
import { Provider, createStore, subscribe } from 'react-contextual'
const externalStore = createStore({
text: 'Hello',
setText: text => ({ text }),
})
const App = () => (
<Provider store={externalStore}>
<Subscribe to={externalStore}>{props => <div>{props.text}</div>}</Subscribe>
</Provider>
)
If you do not supply any functions in the object passed to createStore, a setState
function would be added automatically for you. This applies to both createStore
and the Provider
above.
const store = createStore({ count: 0 })
const Test = subscribe(store)(props => (
<button onClick={() => props.setState(state => ({ count: state.count + 1 }))}>
{props.count}
</button>
))
subscribe and Subscribe (the component) work with any React context, even polyfills. They pick providers and select state. Extend wrapped components from React.PureComponent
and they will only render when picked state has changed.
// Subscribes to all contents of the provider
subscribe(context)
// Picking a variable from the store, the component will only render when it changes ...
subscribe(context, store => ({ loggedIn: store.loggedIn }))
// Picking a variable from the store using the components own props
subscribe(context, (store, props) => ({ user: store.users[props.id] }))
// Making store context available under the 'store' prop
subscribe(context, 'store')
// Selecting several providers
subscribe([Theme, Store], (theme, store) => ({ theme, store }))
// Selecting several providers using the components own props
subscribe([Theme, Store], (theme, store, props) => ({
store,
theme: theme.colors[props.id],
}))
// Making two providers available under the props 'theme' and 'store'
subscribe([Theme, Store], ['theme', 'store'])
Examples: Global context | Transforms | Unique context | Generic React Context
Contextual isn't limited to reading context and store patterns, it also helps you to create and share providers.
import { subscribe, moduleContext, transformContext } from 'react-contextual'
const Theme = moduleContext()(({ context, color, children }) => (
<context.Provider value={{ color }} children={children} />
))
const Invert = transformContext(Theme)(({ context, color, children }) => (
<context.Provider value={invert(color)} children={children} />
))
const Write = subscribe(Theme)(({ color, text }) => (
<span style={{ color }}>{text}</span>
))
const App = () => (
<Theme color="red">
<Write text="hello" />
<Invert>
<Write text="world" />
</Invert>
</Theme>
)
@moduleContext()
class Theme extends React.PureComponent {
// ...
}
@transformContext(Theme)
class Invert extends React.PureComponent {
// ...
}
@subscribe(Theme)
class Say extends React.PureComponent {
// ...
}