React's context is awesome, but a pain on jsx, having a couple of contexts applied to a component makes more spaghetti than my italian mother.

A version of react >= 16.3 is required for this package, as it contains the final context specs.

npm i react-better-context 

The default export createContext is a function requiring a minimum of 2 paramethers, the name that will be used to display the context container (string), and the default value of the context.

// userContext.js import createContext from "react-better-context"; const UserContext = createContext("User", { name: "kornil" });

UserContext value is an object containing Provider, the default context provider, and a connect function that is used to link the consumer instead of the context Consumer.

import UserContext from "./userContext.js" // connecting the Provider class BigContainer extends react.Component { ... render() { const properContextValue = { hello: "world", name: "kornil" } return ( <UserContext.Provider value={properContextValue}> <MyComponent /> </UserContext.Provider> ) } } // connecting the Consumer const MyComponent = (props) => ( <h1> hello {props.UserContext.name} </h1> ); export UserContext.connect(MyComponent);

And you're done.

TL;DR Use Provider the same && instead of Consumer in your jsx, use the connect function the same as react-redux.

• This package is 2KB minified without gzip.
• Other than depending on react itself (not DOM!), it uses react-display-name, a 9 lines package.
• This package is written in typescript, but it is compiled with babel so you can use it regardless.
• The package provides its own types.