Last active
November 9, 2018 13:40
-
-
Save seanrankin/8e9b551db14262d02f52c06e0627e7cc to your computer and use it in GitHub Desktop.
React's new Context API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import ReactDOM from "react-dom"; | |
| const UserContext = React.createContext(); | |
| const UserAvatar = ({ size }) => ( | |
| <UserContext.Consumer> | |
| {user => ( | |
| <img | |
| className={`user-avatar ${size || ""}`} | |
| alt="user avatar" | |
| src={user.avatar} | |
| /> | |
| )} | |
| </UserContext.Consumer> | |
| ); | |
| const UserStats = () => ( | |
| <UserContext.Consumer> | |
| {user => ( | |
| <div className="user-stats"> | |
| <div> | |
| <UserAvatar user={user} /> | |
| {user.name} | |
| </div> | |
| <div className="stats"> | |
| <div>{user.followers} Followers</div> | |
| <div>Following {user.following}</div> | |
| </div> | |
| </div> | |
| )} | |
| </UserContext.Consumer> | |
| ); | |
| const Nav = () => ( | |
| <div className="nav"> | |
| <UserAvatar size="small" /> | |
| </div> | |
| ); | |
| const Content = () => <div className="content">main content here</div>; | |
| const Sidebar = () => ( | |
| <div className="sidebar"> | |
| <UserStats /> | |
| </div> | |
| ); | |
| const Body = () => ( | |
| <div className="body"> | |
| <Sidebar /> | |
| <Content /> | |
| </div> | |
| ); | |
| class App extends React.Component { | |
| state = { | |
| user: { | |
| avatar: | |
| "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", | |
| name: "Dave", | |
| followers: 1234, | |
| following: 123 | |
| } | |
| }; | |
| render() { | |
| const { user } = this.state; | |
| return ( | |
| <div className="app"> | |
| <UserContext.Provider value={this.state.user}> | |
| <Nav /> | |
| <Body /> | |
| </UserContext.Provider> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<App />, document.querySelector("#root")); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment