npm install react-contextual

Why 🤔

• consume and create context with ease, every kind of context, no matter which or whose or how many providers
• a cooked down redux-like store pattern with setState semantics and central actions

Click this link for a detailed explanation.

If you just need a light-weight no-frills store 🎰

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.

Render props

import{Provider,Subscribe}from'react-contextual'conststore={count: 0,up: ()=>state=>({count: state.count+1}),down: ()=>state=>({count: state.count-1}),}constApp=()=>(<Provider{...store}><Subscribe>{props=>(<div><h1>{props.count}</h1><buttononClick={props.up}>Up</button><buttononClick={props.down}>Down</button></div>)}</Subscribe></Provider>)

Higher Order Component

import{Provider,subscribe}from'react-contextual'constView=subscribe()(props=>(<div><h1>{props.count}</h1><buttononClick={props.up}>Up</button><buttononClick={props.down}>Down</button></div>))constApp=()=>(<Provider{...store}><View/></Provider>)

With decorator

@subscribe()classViewextendsReact.PureComponent{// ...}

Default store vs External store

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:

• the store must be passed to its provider with the store property
• it must be referred to either as first argument in subscribe or the to prop in Subscribe

import{Provider,createStore,subscribe}from'react-contextual'constexternalStore=createStore({text: 'Hello',setText: text=>({ text }),})constApp=()=>(<Providerstore={externalStore}><Subscribeto={externalStore}>{props=><div>{props.text}</div>}</Subscribe></Provider>)

Global setState

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.

conststore=createStore({count: 0})constTest=subscribe(store)(props=>(<buttononClick={()=>props.setState(state=>({count: state.count+1}))}>{props.count}</button>))

mapContextToProps

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 providersubscribe(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 propssubscribe(context,(store,props)=>({user: store.users[props.id]}))// Making store context available under the 'store' propsubscribe(context,'store')// Selecting several providerssubscribe([Theme,Store],(theme,store)=>({ theme, store }))// Selecting several providers using the components own propssubscribe([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'])

If you like to provide context 🚀

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.

• moduleContext creates a global provider and injects it into a component
• namedContext creates a unique provider bound to a components lifecycle
• transformContext transforms existing providers (like a declarative middleware)
• helper functions allow you to control a context by yourself

Custom providers & transforms

import{subscribe,moduleContext,transformContext}from'react-contextual'constTheme=moduleContext()(({ context, color, children })=>(<context.Providervalue={{ color }}children={children}/>))constInvert=transformContext(Theme)(({ context, color, children })=>(<context.Providervalue={invert(color)}children={children}/>))constWrite=subscribe(Theme)(({ color, text })=>(<spanstyle={{ color }}>{text}</span>))constApp=()=>(<Themecolor="red"><Writetext="hello"/><Invert><Writetext="world"/></Invert></Theme>)

With decorator

@moduleContext()classThemeextendsReact.PureComponent{// ...}
@transformContext(Theme)classInvertextendsReact.PureComponent{// ...}
@subscribe(Theme)classSayextendsReact.PureComponent{// ...}

---

API | Changelog | Pitfalls using context raw