https://github.com/SunHuawei/with-context

Decorator for new React Context API
https://github.com/SunHuawei/with-context

Last synced: 3 months ago
JSON representation

Decorator for new React Context API

• Host: GitHub
• URL: https://github.com/SunHuawei/with-context
• Owner: SunHuawei
• License: mit
• Created: 2018-02-27T11:18:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-02-28T10:54:37.000Z (over 6 years ago)
• Last Synced: 2024-07-10T16:32:26.597Z (4 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 53
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-state-management - with-context - Decorator for new React Context API. (List)
• awesome-react-context - **with-context** - Decorator for new React Context API. (Libraries)

README

        
# 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/](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 (

      
LeafComponent with theme: {theme}

    );

  }

}

```


## 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 (

      


        
with theme: {langSet && langSet[theme]}

        
with lang: {lang}

      

    );

  }

}

```


## 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 (

    


      StatelessFunctionalComponent with theme: {theme}

    

  );

};


export default withTheme(StatelessFunctionalComponent);

```