with-context
Best practice of new React Context API
Why with-context?
- Less boilerplate/verbosity
- Make the usage more easier
- 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
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
import withContext from "with-context"; const ThemeContext = React;const withTheme = ;
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.
import withTheme from "./withTheme";import styles from "../consts"; @withThemePureComponent { const theme = thisprops; return <div =>LeafComponent with theme: theme</div> ; }
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
import withMultiContext from "with-context"; const ThemeContext = React;const LangContext = React;const withThemeAndI18n = ;
And then for a leaf component LeafComponent.js
, you could use const { theme, lang } = this.props
.
import withThemeAndI18n from "./withThemeAndI18n";import styles langs from "../consts"; @withThemeAndI18nPureComponent { const theme lang = thisprops; const langSet = langslang; return <div => <p>with theme: langSet && langSettheme</p> <p>with lang: lang</p> </div> ; }
Work with stateless functional component
with-context
also works with stateless functional component. For example.
import withTheme from "./withTheme";import styles from "../consts"; const StatelessFunctionalComponent = theme return <div => StatelessFunctionalComponent with theme: theme </div> ;; StatelessFunctionalComponent;