with-context

Best practice of new React Context API

Why with-context?

1. Less boilerplate/verbosity
2. Make the usage more easier
3. Tiny, only 1.8k before compressed

Suggest considering with-context as your best practice.

Live Demo

Check here for online live demo: https://jqkyy1oyv.codesandbox.io/

How to install

``bash
npm i --save with-context
`


Simple Usage

You could use with-context as a decorator -- @withContext(SomeContext) -- on your leaf components.

Here is a example, you may have a file withTheme.js

`jsx
import { withContext } from "with-context";

export const ThemeContext = React.createContext("light");
export const withTheme = withContext(ThemeContext, "theme");
`

Wrap your top component by ThemeContext just as the official demo.

And then, you could use withTheme for any leaf component which need theme.

You could use it as a decorator on your leaf component LeafComponent.js. And then you could simply use this.props.theme in that component.

`jsx
import { withTheme } from "./withTheme";
import { styles } from "../consts";

@withTheme
export default class LeafComponent extends React.PureComponent {
render() {
const { theme } = this.props;
return (



);
}
}
`

Apply multiple context

You also could apply multiple context by this API -- @withMultiContext({theme: ThemeContext, lang: LangContext}).

Here is a example, you could have a file withThemeAndI18n.js
`jsx
import { withMultiContext } from "with-context";

export const ThemeContext = React.createContext("light");
export const LangContext = React.createContext("en");
export const withThemeAndI18n = withMultiContext({
theme: ThemeContext,
lang: LangContext
});
`

And then for a leaf component LeafComponent.js, you could use const { theme, lang } = this.props.

`jsx
import { withThemeAndI18n } from "./withThemeAndI18n";
import { styles, langs } from "../consts";

@withThemeAndI18n
export default class LeafComponent extends React.PureComponent {
render() {
const { theme, lang } = this.props;
const langSet = langs[lang];
return (



);
}
}
`

Work with stateless functional component

with-context also works with stateless functional component. For example.

`jsx
import { withTheme } from "./withTheme";
import { styles } from "../consts";

const StatelessFunctionalComponent = ({ theme }) => {
return (


);
};

export default withTheme(StatelessFunctionalComponent);
``