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: 4 months 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 (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-06-14T15:39:28.000Z (about 5 years ago)
- Last Synced: 2025-03-17T09:52:25.847Z (4 months ago)
- Language: JavaScript
- Size: 11.9 MB
- Stars: 1
- Watchers: 2
- 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`
- 