Last active
June 2, 2019 18:31
-
-
Save marcosmapf/584a2c84d6975dd9c876685000954aab to your computer and use it in GitHub Desktop.
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, { useState, useEffect } from 'react'; | |
| const UserCardExample = props => { | |
| const [user, setUser] = useState(""); | |
| const [fetching, setFetching] = useState(true); | |
| const fetchRandomUser = async _ => | |
| await fetch("https://randomuser.me/api") | |
| .then(response => response.json()) | |
| .then(object => object.results[0]); | |
| useEffect(_ => | |
| fetchRandomUser() | |
| .then(user => setUser(user)) | |
| .then(_ => setFetching(false)) | |
| , []); | |
| return ( | |
| fetching? <p>Fetching...</p> | |
| : <UserCard user={user} /> | |
| ) | |
| }; | |
| const UserCard = props => | |
| <div className="card-user"> | |
| <CardAvatar | |
| photo={props.user.picture} | |
| name={props.user.name} | |
| round | |
| large | |
| /> | |
| <CardInfo user={props.user} /> | |
| </div>; | |
| const CardAvatar = props => { | |
| const size = props.large ? "large" : "small"; | |
| const round = props.round ? "round" : ""; | |
| return <img | |
| className={`card-avatar ${size} ${round}`} | |
| src={props.large ? props.photo.large : props.photo.medium} | |
| alt="User Profile" | |
| /> | |
| }; | |
| const CardInfo = props => | |
| <div className="card-info"> | |
| <p>User Name: {props.user.name.first} {props.user.name.last}</p> | |
| <p>Gender: {props.user.gender}</p> | |
| <p>Age: {props.user.dob.age}</p> | |
| <p>Email: {props.user.email}</p> | |
| </div>; | |
| ReactDOM.render( | |
| <div className="container"> | |
| <UserCardExample /> | |
| <UserCardExample /> | |
| </div>, | |
| document.getElementById('root') | |
| ); | |
| /* | |
| CSS for Example: | |
| * { | |
| font-family: sans-serif; | |
| margin: 0; | |
| } | |
| .card-user { | |
| display: inline-flex; | |
| padding: 1rem; | |
| -webkit-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); | |
| -moz-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); | |
| box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); | |
| } | |
| .card-info { | |
| padding-left: 1rem; | |
| line-height: 2rem; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .card-avatar.round { | |
| border-radius: 50%; | |
| border: 5px solid #eee; | |
| box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .card-avatar.small { | |
| width: 100px; | |
| border-radius: 50%; | |
| border: 5px solid #eee; | |
| box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); | |
| } | |
| .container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-self: center; | |
| margin: 10px; | |
| -webkit-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment