Helpers to convert from props to context and back again.
In the box, you get:
contextProvider(name: string, keys: string[])
- creates a provider component for the given context keycontextConsumer(name: string)
- creates a component decorator that will feed the context as props into the wrapped component
If the context changes, the consumers are notified of the change.
Rewritten entirely from v1.0 as this was fundamentally broken.
Install:
$ npm install --save react-context-helpers
Import, then define your components:
import { contextProvider, contextConsumer } from 'react-context-helpers';
interface ThemeContext {
colour: string;
}
// define a context provider and a context consumer
const Theme = contextProvider<ThemeContext>('theme');
const ColouredButton = contextConsumer<ThemeContext>('theme')(
(props) => <button style={{background: props.colour}}>{props.children}</button>
);
const app = () => (
<Theme colour='red'>
<h1>Demo</h1>
<div className='box'>
<ColouredButton>Click me</ColouredButon>
</div>
</Theme>
);