Add basic useAsync example.

ghengeveld · ghengeveld · commit 14268c517359 · 2018-12-30T23:05:17.000+01:00
diff --git a/examples/basic-hook/.env b/examples/basic-hook/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/basic-hook/.gitignore b/examples/basic-hook/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/basic-hook/README.md b/examples/basic-hook/README.md
@@ -0,0 +1,5 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/basic-hook)
+
+# Basic fetch with useAsync hook
+
+This demonstrates how to use the `useAsync` hook.
diff --git a/examples/basic-hook/package.json b/examples/basic-hook/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "basic-hook",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "16.7.0-alpha.2",
+    "react-async": "3.11.0",
+    "react-dom": "16.7.0-alpha.2",
+    "react-scripts": "2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "now-build": "npm run build && mv build dist"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/basic-hook/public/favicon.ico b/examples/basic-hook/public/favicon.ico
diff --git a/examples/basic-hook/public/index.html b/examples/basic-hook/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/basic-hook/src/index.css b/examples/basic-hook/src/index.css
@@ -0,0 +1,29 @@
+body {
+  margin: 20px;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.user {
+  display: inline-block;
+  margin: 20px;
+  text-align: center;
+}
+
+.avatar {
+  background: #eee;
+  border-radius: 64px;
+  width: 128px;
+  height: 128px;
+}
+
+.name {
+  margin-top: 10px;
+}
+
+.placeholder {
+  opacity: 0.5;
+}
diff --git a/examples/basic-hook/src/index.js b/examples/basic-hook/src/index.js
@@ -0,0 +1,43 @@
+import React from "react"
+import { useAsync } from "react-async"
+import ReactDOM from "react-dom"
+import "./index.css"
+
+const loadUser = ({ userId }) =>
+  fetch(`https://reqres.in/api/users/${userId}`)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+    .then(({ data }) => data)
+
+const UserPlaceholder = () => (
+  <div className="user placeholder">
+    <div className="avatar" />
+    <div className="name">══════</div>
+  </div>
+)
+
+const UserDetails = ({ data }) => (
+  <div className="user">
+    <img className="avatar" src={data.avatar} alt="" />
+    <div className="name">
+      {data.first_name} {data.last_name}
+    </div>
+  </div>
+)
+
+const User = ({ userId }) => {
+  const { data, error, isLoading } = useAsync({ promiseFn: loadUser, userId })
+  if (isLoading) return <UserPlaceholder />
+  if (error) return <p>{error.message}</p>
+  if (data) return <UserDetails data={data} />
+  return null
+}
+
+const App = () => (
+  <>
+    <User userId={1} />
+    <User userId={2} />
+  </>
+)
+
+ReactDOM.render(<App />, document.getElementById("root"))
