Add custom instance example.

ghengeveld · ghengeveld · commit 23c5f86e609c · 2018-12-30T15:55:20.000+01:00
diff --git a/examples/custom-instance/README.md b/examples/custom-instance/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/custom-instance)
+
+# Custom React Async instance
+
+Demonstrates how to use a preconfigured React Async instance.
diff --git a/examples/custom-instance/now.json b/examples/custom-instance/now.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
+  "routes": [
+    { "src": "^/static/(.*)", "dest": "/static/$1" },
+    { "src": "^/favicon.ico", "dest": "/favicon.ico" },
+    { "src": "^/(.*)", "dest": "/index.html" }
+  ]
+}
diff --git a/examples/custom-instance/package.json b/examples/custom-instance/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "custom-instance",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-async": "latest",
+    "react-dom": "^16.7.0",
+    "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/custom-instance/public/favicon.ico b/examples/custom-instance/public/favicon.ico
diff --git a/examples/custom-instance/public/index.html b/examples/custom-instance/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/custom-instance/src/index.css b/examples/custom-instance/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/custom-instance/src/index.js b/examples/custom-instance/src/index.js
@@ -0,0 +1,52 @@
+import React from "react"
+import { createInstance } 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())
+
+const AsyncUser = createInstance({
+  promiseFn: loadUser,
+})
+
+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.data.avatar} alt="" />
+    <div className="name">
+      {data.data.first_name} {data.data.last_name}
+    </div>
+  </div>
+)
+
+const App = () => (
+  <>
+    <AsyncUser userId={1}>
+      {({ data, error, isLoading }) => {
+        if (isLoading) return <UserPlaceholder />
+        if (error) return <p>{error.message}</p>
+        if (data) return <UserDetails data={data} />
+        return null
+      }}
+    </AsyncUser>
+
+    <AsyncUser userId={2}>
+      <AsyncUser.Loading>
+        <UserPlaceholder />
+      </AsyncUser.Loading>
+      <AsyncUser.Resolved>{data => <UserDetails data={data} />}</AsyncUser.Resolved>
+      <AsyncUser.Rejected>{error => <p>{error.message}</p>}</AsyncUser.Rejected>
+    </AsyncUser>
+  </>
+)
+
+ReactDOM.render(<App />, document.getElementById("root"))
