A tiny helper around React 16s new context api

react-contextual

react-contextual is a tiny (less than 1KB) helper around React 16s new context api.

Why

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

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

Examples: Counter | Global setState | Async actions | Memoization/Reselect | Multiple stores | External store

Use Provider to distribute state and actions. Connect components either by using a HOC or render-props.

Render props

import { Provider, Subscribe } from 'react-contextual'

const store = {
    initialState: { count: 0 },
    actions: {
        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.actions.up}>Up</button>
                    <button onClick={props.actions.down}>Down</button>
                </div>
            )}
        </Subscribe>
    </Provider>,
)

Higher Order Component

import { Provider, subscribe } from 'react-contextual'

const View = subscribe()(props => (
    <div>
        <h1>{props.count}</h1>
        <button onClick={props.actions.up}>Up</button>
        <button onClick={props.actions.down}>Down</button>
    </div>
))

const App = () => (
    <Provider {...store}>
        <View />
    </Provider>,
)

With decorator

@subscribe()
class View extends React.PureComponent {
    // ...
}

External store

Maintain your own store via createStore. It is fully reactive and features a basic subscription model, similar to a redux store.

import { Provider, createStore, subscribe } from 'react-contextual'

const externalStore = createStore({
    initialState: { count: 0 },
    actions: { up: () => state => ({ count: state.count + 1 }) },
})

const Test = subscribe(externalStore)(
    props => <button onClick={() => props.actions.up()}>{props.count}</button>,
)

const App = () => (
    <Provider store={externalStore}>
        <Test />
    </Provider>,
)

Global setState

If you do not supply actions createStore will add setState by default.

const store = createStore({ initialState: { count: 0 } })

const Test = subscribe(store)(
    props => (
        <button onClick={() => props.actions.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 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'])

If you like to provide context

Examples: Global context | Transforms | Unique context | Imperative 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'

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>,
)

With decorator

@moduleContext()
class Theme extends React.PureComponent {
    // ...
}

@transformContext(Theme)
class Invert extends React.PureComponent {
    // ...
}

@subscribe(Theme)
class Say extends React.PureComponent {
    // ...
}

---

GitHub