Package Exports

with-context

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (with-context) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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";

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.

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

@withTheme
export default class LeafComponent extends React.PureComponent {
  render() {
    const { theme } = this.props;
    return (
      <div style={styles[theme]}>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";

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.

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 (
      <div style={styles[theme]}>
        <p>with theme: {langSet && langSet[theme]}</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 style={styles[theme]}>
      StatelessFunctionalComponent with theme: {theme}
    </div>
  );
};

export default withTheme(StatelessFunctionalComponent);