Last active
November 25, 2020 16:58
-
-
Save crshmk/2bb87feaba72b8d56d96156849d54fc5 to your computer and use it in GitHub Desktop.
global user / auth hook
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>useAuth hook</title> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/[email protected]/babel.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script type="text/babel"> | |
| let { createContext, useContext, useEffect, useState } = React | |
| let fetchUser = cb => id => { | |
| fetch(`https://jsonplaceholder.typicode.com/users/${id}`) | |
| .then(res => res.json()) | |
| .then(user => cb(user)) | |
| .catch(console.log) | |
| } | |
| let useAuthProvider = () => { | |
| let [user, setUser] = useState({}) | |
| let signin = fetchUser(setUser) | |
| let signout = () => setUser('') | |
| return { | |
| user, | |
| signin, | |
| signout | |
| } | |
| } | |
| let AuthContext = createContext() | |
| let AuthProvider = ({children}) => { | |
| let auth = useAuthProvider() | |
| return ( | |
| <AuthContext.Provider value={auth}> | |
| {children} | |
| </AuthContext.Provider> | |
| ) | |
| } | |
| let useAuth = () => useContext(AuthContext) | |
| function User({children}) { | |
| let [id, setId] = useState(3) | |
| let auth = useAuth() | |
| useEffect(() => { | |
| !!id && auth.signin(id) | |
| } , [id]) | |
| return ( | |
| <div> | |
| <p>enter a single digit int</p> | |
| <p> | |
| <input | |
| type="text" | |
| value={id} | |
| onChange={e => setId(e.target.value)} | |
| /> | |
| </p> | |
| {children} | |
| </div> | |
| ) | |
| } | |
| let Name = () => { | |
| let auth = useAuth() | |
| return <p>user name is {auth.user.name}</p> | |
| } | |
| let Email = () => { | |
| let auth = useAuth() | |
| return <p>user email is {auth.user.email}</p> | |
| } | |
| function App() { | |
| return ( | |
| <AuthProvider> | |
| <User> | |
| <Name /> | |
| <Email /> | |
| </User> | |
| </AuthProvider> | |
| ) | |
| } | |
| ReactDOM.render( | |
| <App />, | |
| document.getElementById('app') | |
| ) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment