react-context-composer
React 16.3 shipped a new Context API. The API encourages composition. This utility component helps keep your code clean when your component will be rendering multiple Context Providers and Consumers.
Install
npm install --save react-context-composer
Usage
import React Component from 'react'import ContextComposer from 'react-context-composer';import createReactContext type Context from 'create-react-context'; type Theme = 'light' | 'dark';type Language = 'en'; // Pass a default theme to ensure type correctnessconst ThemeContext: Context<Theme> = ;const LanguageContext: Context<Language> = ; Component< children: Node theme: Theme language: Language > state = theme: 'light' language: 'en' ; { return // Pass the current context value to the Provider's `value` prop. // Changes are detected using strict comparison (Object.is) <ContextComposer => <button = > Toggle theme </button> thispropschildren </ContextComposer> ; } { return <ContextComposer => theme language <h1 => language: children </h1> </ContextComposer> ;} ;
License
MIT © Blaine Kasten