Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gabrielbb/react-context-combining
React Context Provider/Consumer combining example
https://github.com/gabrielbb/react-context-combining
Last synced: 14 days ago
JSON representation
React Context Provider/Consumer combining example
- Host: GitHub
- URL: https://github.com/gabrielbb/react-context-combining
- Owner: GabrielBB
- License: mit
- Created: 2018-10-18T21:23:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-18T22:28:44.000Z (about 6 years ago)
- Last Synced: 2024-10-11T04:05:28.506Z (28 days ago)
- Language: JavaScript
- Size: 150 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## React Context Combining Example
You can create a ```context.js```. In this case we have 3 contexts:
* UserContext: holds a string with the logged user name
* ColorContext: holds a string with the app font color
* BrowserContext: holds the client browser object
#### context.js
```jsx
import React from 'react';
const UserContext = React.createContext();
const ColorContext = React.createContext();
const BrowserContext = React.createContext();
export const Provider = ({ user, color, browser, children }) => (
{children}
)
export const Consumer = ({ children }) => (
{user =>
{color =>
{browser => children({ user, color, browser })}
}
}
)
```
What we are doing here is simply creating a re-usable component tree with the dynamic ```children``` components at the bottom. See: [React composition model](https://reactjs.org/docs/composition-vs-inheritance.html)
In our ```App.js``` we initialize and pass the entire state to the our previously created ```Provider``` Component. Thanks to [Javascript Object Destructing](https://davidwalsh.name/destructuring-function-arguments) our ```Provider``` will only take what it needs from that state.
#### App.js
```jsx
import React from 'react';
import { Provider } from './context';
import BrowserInfo from './components/BrowserInfo';
import UserInfo from './components/UserInfo';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: 'Gabriel Basilio Brito',
color: 'red',
browser: { owner: 'Google', name: 'Chrome' }
}
}
toggleColor = () => {
let color = this.state.color === 'red' ? 'black' : 'red';
this.setState({ color })
}
render() {
return (
Toggle Font Color
);
}
}
```
As you can see we also have a button that toggles the color in the state, causing React to re-render the ```Provider``` with the new color value.
`````` and `````` are using our previously created ```Consumer``` component to read the app state values:
#### BrowserInfo.js
```jsx
import React from 'react';
import { Consumer } from '../context';
const BrowserInfo = () => {
return
{
({ browser, color }) =>
You are using: {browser.owner} {browser.name}
}
;
}
export default BrowserInfo;
```
#### UserInfo.js
```jsx
import React from 'react';
import { Consumer } from '../context';
const UserInfo = () => {
return
{
({ user, color }) =>
Hi, {user}
}
;
}
export default UserInfo;
```
### App Screenshots:
