Skip to content

Instantly share code, notes, and snippets.

@marcosmapf

marcosmapf/reactHooksCheatSheet.jsx

Last active June 2, 2019 18:31
Show Gist options
  • Save marcosmapf/584a2c84d6975dd9c876685000954aab to your computer and use it in GitHub Desktop.
Save marcosmapf/584a2c84d6975dd9c876685000954aab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marcosmapf revised this gist Jun 2, 2019. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion reactHooksCheatSheet.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,6 @@ const UserCardExample = props => {
    fetchRandomUser()
    .then(user => setUser(user))
    .then(_ => setFetching(false))
    .then(_ => console.log("User: ", user))
    , []);

    return (
  2. marcosmapf created this gist Jun 2, 2019.
    101 changes: 101 additions & 0 deletions reactHooksCheatSheet.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    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))
    .then(_ => console.log("User: ", user))
    , []);

    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;
    }
    */