You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+13-19Lines changed: 13 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -96,16 +96,11 @@ Our async Component factory. Config goes in, an async Component comes out.
96
96
97
97
#### Arguments
98
98
99
-
-`config` : _Object_
100
-
The configuration object for the async Component. It has the following properties available:
101
-
-`resolve` : _Function => Promise<Component>_
102
-
A function that should return a `Promise` that will resolve the Component you wish to be async.
103
-
-`defer` : _Boolean_ (Optional, default: false)
104
-
Only useful for server side rendering applications. If this is set to true then the async component will only be resolved on the client/browser, not the server. I _highly_ recommend that you consider using this value as much as you can. Try to relieve the load on your server and use server side rendering to provide an application shell for your users. They will still get a perceived performance benefit.
A Component to be displayed whilst your async Component is being resolved. It will be provided the same props that will be provided to your resovled async Component.
107
-
-`es6Aware` : _Boolean_ (Optional, default: true)
108
-
If you are using ES2015 modules with default exports (i.e `export default MyComponent`) then you may need your Component resolver to do syntax such as `require('./MyComp').default`. Forgetting the `.default` can cause havoc with hard to debug error messages. To cover your back we will automatically try to resolve a `.default` on the result that is resolved by your Component. If the `.default` exists it will be used, else we will use the original result.
99
+
-`config` (_Object_) : The configuration object for the async Component. It has the following properties available:
100
+
-`resolve` (_Function => Promise<Component>_) :A function that should return a `Promise` that will resolve the Component you wish to be async.
101
+
-`defer` (_Boolean_, Optional, default: false) : Only useful for server side rendering applications. If this is set to true then the async component will only be resolved on the client/browser, not the server. I _highly_ recommend that you consider using this value as much as you can. Try to relieve the load on your server and use server side rendering to provide an application shell for your users. They will still get a perceived performance benefit.
102
+
-`Loading` (_Component_, Optional, default: null) : A Component to be displayed whilst your async Component is being resolved. It will be provided the same props that will be provided to your resovled async Component.
103
+
-`es6Aware` (_Boolean_, Optional, default: true) : If you are using ES2015 modules with default exports (i.e `export default MyComponent`) then you may need your Component resolver to do syntax such as `require('./MyComp').default`. Forgetting the `.default` can cause havoc with hard to debug error messages. To cover your back we will automatically try to resolve a `.default` on the result that is resolved by your Component. If the `.default` exists it will be used, else we will use the original result.
109
104
110
105
#### Returns
111
106
@@ -188,16 +183,15 @@ Decorates your application with the ability to use async Components in an effici
188
183
189
184
A promise that resolves in a `result` object. The `result` object will have the following properties available:
190
185
191
-
-`appWithAsyncComponents`_React.Element_
192
-
Your application imbued with the ability to use async Components. ❗️Use this when rendering your app.
193
-
-`state`_Object_
194
-
Only used on the "server" side of server side rendering applications. It represents the state of your async Components (i.e. which ones were rendered) so that the server can feed this information back to the client/browser.
195
-
-`STATE_IDENTIFIER`_String_
196
-
Only used on the "server" side of server side rendering applications. The identifier of the property you should bind the `state` object to on the `window` object.
186
+
-`appWithAsyncComponents` (_React.Element_) : Your application imbued with the ability to use async Components. ❗️Use this when rendering your app.
187
+
-`state` (_Object_) : Only used on the "server" side of server side rendering applications. It represents the state of your async Components (i.e. which ones were rendered) so that the server can feed this information back to the client/browser.
188
+
-`STATE_IDENTIFIER` (_String_) : Only used on the "server" side of server side rendering applications. The identifier of the property you should bind the `state` object to on the `window` object.
197
189
198
190
### Examples
199
191
200
-
#### Usage
192
+
#### Standard Usage
193
+
194
+
This is how you would use this helper in a "normal" React application or on the "client" side of a "server side rendering" React application.
201
195
202
196
```jsx
203
197
importReactfrom'react';
@@ -225,9 +219,9 @@ withAsyncComponents(app)
225
219
226
220
#### Server Side Rendering Usage
227
221
228
-
When using this helper on the "server" side of your server side rendering applications you should do the following.
222
+
When using this helper on the "server" side of your "server side rendering" React application you should do the following.
229
223
230
-
> Note: on the "client" side of a server side rendering application you can use the helper in the "nomral" fashion as detailed in the previous example.
224
+
> Note: on the "client" side of a "server side rendering" application you can use the helper in the "standard" fashion as detailed in the previous example.
0 commit comments