Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ab4a066

Browse files
Update README.md
1 parent b3d8924 commit ab4a066

File tree

1 file changed

+57
-1
lines changed

1 file changed

+57
-1
lines changed

‎README.md

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,63 @@ Provides the ability to execute async bootstrapper functions within your React e
1414

1515
## Introduction
1616

17-
> Coming Soon
17+
This library is an abstraction of [`react-tree-walker`](https://github/ctrlplusb/react-tree-walker), that allows you to attach an `asyncBootstrap` member to your React components.
18+
19+
Within the `asyncBootstrap` you can do any work/bootstrapping that you like and then return a `Promise` that should resolve to either `true` (which indicates back to the bootstrapping process that it should continue down the current branch of your application in order to locate and resolve any nested `asyncBootstrap` instances), or `false` (which indicates that traversal of the current branch of your application can stop).
20+
21+
## Naive Example
22+
23+
```jsx
24+
import asyncBootstrapper from 'react-async-bootstrapper'
25+
26+
// Don't do this, do a proper imp
27+
const globalStateManager = {
28+
products: {},
29+
}
30+
31+
class Product extends Component {
32+
// 👇
33+
asyncBootstrap() {
34+
if (globalStateManager.products[this.props.productId]) {
35+
// Already have data, just return true to allow nested
36+
// asyncBootstrap instances to be located/resolved
37+
return true
38+
}
39+
40+
// Fetch our product and load up our state
41+
return fetch(`/api/products/${this.props.productId}`)
42+
.then((response) => {
43+
// store in our global state
44+
globalStateManager.products[this.props.productId] = response.json()
45+
// Indicates our desire to allow for nested asyncBootstrap instances
46+
// to be located/resolved
47+
return true
48+
})
49+
}
50+
51+
render() {
52+
const product = globalStateManager.products[this.props.productId]
53+
return (
54+
<div>
55+
{product.name} - {product.price}
56+
</div>
57+
)
58+
}
59+
}
60+
61+
const app = (
62+
<div>
63+
<h1>My favourite product</h1>
64+
<Product productId={1337} />
65+
</div>
66+
)
67+
68+
// Now for the bootstrapping/rendering process (on a client/server)
69+
asyncBootstrapper(app).then(() => {
70+
// bootstrapping complete
71+
ReactDOM.render(app, document.getElementById('app'))
72+
})
73+
```
1874

1975
## FAQs
2076

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /