https://github.com/ebazhanov/how-to-usecontext-hook-in-react

Example of how to use react useContext hook
https://github.com/ebazhanov/how-to-usecontext-hook-in-react

Last synced: 26 days ago
JSON representation

Example of how to use react useContext hook

• Host: GitHub
• URL: https://github.com/ebazhanov/how-to-usecontext-hook-in-react
• Owner: Ebazhanov
• Created: 2020-06-14T10:54:00.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-14T15:39:28.000Z (over 4 years ago)
• Last Synced: 2025-01-22T14:54:32.909Z (30 days ago)
• Language: JavaScript
• Size: 11.9 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Motivation: better understand concept of how we can use in react `useContext` hook [orignal info](https://reactjs.org/docs/hooks-reference.html#usecontext)

#### When to Use Context

> Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the

## First - create the themes which you want to use

```javascript

export const themes = {

    dark: {

        color: 'white',

        background: 'black',

    },

    light: {

        color: 'black',

        background: 'white'

    }

}

```

## Second - add component `Layout.jsx` with `useContext` hook, which will return style of your selected theme

```javascript

const Layout = () => {

    const theme = useContext(ThemeColorBackground)

    return (

        


            
here you can easily change "theme" by using React hook

useContext(themes.dark)

        

    )

};

```


## Third and last - add new layout theme to your main `App.js` with `.Provider` key and value e.g.`value={themes.dark}` or `value={themes.red}

```javascript

function App() {

    return (

        

            

        

    );

}

```

### Usage:

- `yarn start`

- ![demo](useContextGif.gif)