Skip to content

Commit a724a0d

Browse files
ghengeveldghengeveld
committed
Update README.md
1 parent 50c3301 commit a724a0d

27 files changed

+853
-8
lines changed

‎README.md‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Hooks for ultimate flexibility as well as the new Context API for ease of use. M
3636
error states, without assumptions about the shape of your data or the type of request.
3737

3838
- Zero dependencies
39-
- Works with any (native) Promise and the Fetch API
39+
- Works with promises, async/await and the Fetch API
4040
- Choose between Render Props, Context-based helper components or the `useAsync` and `useFetch` hooks
4141
- Provides convenient `isLoading`, `startedAt` and `finishedAt` metadata
4242
- Provides `cancel` and `reload` actions
@@ -45,6 +45,7 @@ error states, without assumptions about the shape of your data or the type of re
4545
- Supports [abortable fetch] by providing an AbortController
4646
- Supports optimistic updates using `setData`
4747
- Supports server-side rendering through `initialValue`
48+
- Comes with type definitions for TypeScript
4849
- Works well in React Native too!
4950

5051
[abortable fetch]: https://developers.google.com/web/updates/2017/09/abortable-fetch
@@ -79,6 +80,7 @@ error states, without assumptions about the shape of your data or the type of re
7980
- [Form submission](#form-submission)
8081
- [Optimistic updates](#optimistic-updates)
8182
- [Server-side rendering](#server-side-rendering)
83+
- [Who's using React Async](#whos-using-react-async)
8284
- [Acknowledgements](#acknowledgements)
8385

8486
## Rationale
@@ -135,10 +137,11 @@ core functionality from within your own function components:
135137
```js
136138
import { useAsync } from "react-async"
137139

138-
const loadCustomer = ({ customerId }, { signal }) =>
139-
fetch(`/api/customers/${customerId}`, { signal })
140-
.then(res => (res.ok ? res : Promise.reject(res)))
141-
.then(res => res.json())
140+
const loadCustomer = async ({ customerId }, { signal }) => {
141+
const res = await fetch(`/api/customers/${customerId}`, { signal })
142+
if (!res.ok) throw new Error(res)
143+
return res.json()
144+
}
142145

143146
const MyComponent = () => {
144147
const { data, error, isLoading } = useAsync({ promiseFn: loadCustomer, customerId: 1 })
@@ -273,7 +276,7 @@ const MyComponent = () => (
273276

274277
### Options
275278

276-
These can be passes in an object to `useAsync`, or as props to `<Async>` and custom instances.
279+
These can be passed in an object to `useAsync()`, or as props to `<Async>` and custom instances.
277280

278281
- `promiseFn` Function that returns a Promise, automatically invoked.
279282
- `deferFn` Function that returns a Promise, manually invoked with `run`.
@@ -306,11 +309,11 @@ to send data to the server following a user action, such as submitting a form. Y
306309
`promiseFn` to fill the form with existing data, then updating it on submit with `deferFn`.
307310

308311
> Be aware that when using both `promiseFn` and `deferFn`, the shape of their resolved value should match, because they
309-
> both update the `data`.
312+
> both update the same `data`.
310313
311314
#### `watch`
312315

313-
> `boolean | any`
316+
> `any`
314317
315318
Watches this property through `componentDidUpdate` and re-runs the `promiseFn` when the value changes, using a simple
316319
reference check (`oldValue !== newValue`). If you need a more complex update check, use `watchFn` instead.
@@ -634,6 +637,12 @@ render() {
634637
}
635638
```
636639

640+
## Who's using React Async
641+
642+
<a href="https://xebia.com"><img src="https://user-images.githubusercontent.com/321738/52999660-a9949780-3426-11e9-9a7e-42b400f4ccbe.png" height="40" alt="Xebia" /></a> <a href="https://intergamma.nl"><img src="https://user-images.githubusercontent.com/321738/52999676-b5805980-3426-11e9-899e-6c9669176df4.png" height="40" alt="Intergamma" /></a>
643+
644+
Your organization here? [Let us know](https://github.com/ghengeveld/react-async/issues/22) you're using React Async!
645+
637646
## Acknowledgements
638647

639648
Versions 1.x and 2.x of `react-async` on npm are from a different project abandoned years ago. The original author was

‎examples/movie-app/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/movie-app/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎examples/movie-app/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/movie-app)
2+
3+
# Movie app using React Async
4+
5+
This is a rebuild of the [React Suspense IO demo](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html)
6+
by Dan Abramov at JSConf Iceland 2018, using React Async instead of Suspense.

‎examples/movie-app/now.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"version": 2,
3+
"builds": [{ "src": "package.json", "use": "@now/static-build" }],
4+
"routes": [
5+
{ "src": "^/static/(.*)", "dest": "/static/$1" },
6+
{ "src": "^/favicon.ico", "dest": "/favicon.ico" },
7+
{ "src": "^/(.*)", "dest": "/index.html" }
8+
]
9+
}

‎examples/movie-app/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "movie-app",
3+
"version": "0.0.0",
4+
"private": true,
5+
"dependencies": {
6+
"react": "^16.7.0",
7+
"react-async": "3.13.2",
8+
"react-dom": "^16.7.0",
9+
"react-scripts": "2.1.3"
10+
},
11+
"scripts": {
12+
"start": "react-scripts start",
13+
"build": "react-scripts build",
14+
"now-build": "npm run build && mv build dist"
15+
},
16+
"eslintConfig": {
17+
"extends": "react-app"
18+
},
19+
"browserslist": [
20+
">0.2%",
21+
"not dead",
22+
"not ie <= 11",
23+
"not op_mini all"
24+
]
25+
}

‎examples/movie-app/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/movie-app/public/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
<meta name="theme-color" content="#000000" />
11+
<!--
12+
manifest.json provides metadata used when your web app is added to the
13+
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
14+
-->
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<!--
17+
Notice the use of %PUBLIC_URL% in the tags above.
18+
It will be replaced with the URL of the `public` folder during the build.
19+
Only files inside the `public` folder can be referenced from the HTML.
20+
21+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22+
work correctly both with client-side routing and a non-root public URL.
23+
Learn how to configure a non-root public URL by running `npm run build`.
24+
-->
25+
<title>React App</title>
26+
</head>
27+
<body>
28+
<noscript>You need to enable JavaScript to run this app.</noscript>
29+
<div id="root"></div>
30+
<!--
31+
This HTML file is a template.
32+
If you open it directly in the browser, you will see an empty page.
33+
34+
You can add webfonts, meta tags, or analytics to this file.
35+
The build step will place the bundled scripts into the <body> tag.
36+
37+
To begin the development, run `npm start` or `yarn start`.
38+
To create a production bundle, use `npm run build` or `yarn build`.
39+
-->
40+
</body>
41+
</html>

‎examples/movie-app/public/manifest.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
}
10+
],
11+
"start_url": ".",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}

‎examples/movie-app/src/App.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.App {
2+
max-width: 500px;
3+
margin: 0 auto;
4+
padding: 20px;
5+
}
6+
7+
.Movie {
8+
position: relative;
9+
margin: 20px 0;
10+
background-color: #090e21;
11+
background-position: center;
12+
background-size: cover;
13+
border-radius: 5px;
14+
cursor: pointer;
15+
}
16+
.Movie .content {
17+
border-radius: 4px;
18+
background-image: linear-gradient(rgba(9, 14, 33, 0.6), rgb(9, 14, 33));
19+
padding: 20px;
20+
display: flex;
21+
flex-direction: column;
22+
flex-grow: 1;
23+
}
24+
.Movie .content:hover {
25+
background-color: rgba(9, 14, 33, 0.6);
26+
}
27+
.Movie .title {
28+
font-size: 1.5em;
29+
font-weight: bold;
30+
margin-bottom: 8px;
31+
}
32+
.Movie .info {
33+
font-size: 0.9em;
34+
opacity: 0.5;
35+
}
36+
.Movie .desc {
37+
margin-top: 16px;
38+
font-size: 0.9em;
39+
line-height: 1.4em;
40+
opacity: 0.7;
41+
}
42+
43+
.Details .main {
44+
display: flex;
45+
margin: 16px 0;
46+
align-items: flex-start;
47+
}
48+
.Details .info {
49+
display: flex;
50+
flex-direction: column;
51+
flex-grow: 1;
52+
line-height: 1.4em;
53+
}
54+
.Details h1 {
55+
margin: 10px 0 20px;
56+
line-height: 1em;
57+
}
58+
.Details img {
59+
margin-right: 20px;
60+
}
61+
.Details .ratings {
62+
display: flex;
63+
border-top: 2px solid #111629;
64+
padding: 15px 0;
65+
}
66+
.Details .rating {
67+
flex-grow: 1;
68+
}
69+
.Details .rating .title {
70+
margin-bottom: 10px;
71+
text-transform: uppercase;
72+
font-size: smaller;
73+
font-weight: bold;
74+
color: #949aa4;
75+
}
76+
.Details .rating .score {
77+
font-size: 2em;
78+
font-weight: bolder;
79+
}
80+
.Details .reviews {
81+
display: flex;
82+
flex-wrap: wrap;
83+
}
84+
.Details .review {
85+
margin-bottom: 16px;
86+
padding: 12px;
87+
background-color: #090e21;
88+
border: 1px solid #151828;
89+
border-radius: 3px;
90+
}
91+
.Details .review p {
92+
margin-top: 0;
93+
line-height: 1.4em;
94+
font-size: 0.9em;
95+
}
96+
.Details .review small {
97+
color: #949aa4;
98+
}

0 commit comments

Comments
 (0)