autosuspense 0.1.1 → 0.1.2

package/README.md

@@ -1,6 +1,42 @@
 # AutoSupense
-AutoSuspense is a simple react library allowing user's to automatically wire suspense components based on there component structure automatically without building additional fallback UI.
+AutoSuspense is a small React utility that automatically builds and composes
+Suspense fallback UI based on your component tree without manually wiring
+nested fallback components.
 
 ## How to use?:
 1. Install this library
-```npm i autosuspense```
+```npm i autosuspense```
+
+2. Use it by calling and passing your components normally like ```<Supense>```:
+```
+import { AutoSuspense } from "autosuspense";
+
+function App() {
+  return (
+    <AutoSuspense>
+      <Page />
+    </AutoSuspense>
+  );
+}
+```
+
+3. Inside each AutoSuspense component provide a fallback componet for that particular component via ```useSuspenseFallback``` hook.
+```
+import { useSuspenseFallback } from "autosuspense";
+
+function UserCard() {
+  useSuspenseFallback(<div>Loading user…</div>);
+
+  // Component may suspend somewhere below
+  return <Profile />;
+}
+```
+
+### Important Caveats:
+1. This library works on top of existing Suspense blocks and prebuilds your Fallback UI via render tree traversal.
+2. This means that it uses Depth First searching to prebuild so react is only able to show prebuilt Ui when it first encounters a place to suspend. This could mean that rest of your fallback UI in next adjacent components never render.
+
+### TBD:
+1. Adding Default Skeletons.
+2. Supporting existing Library skeleton implementations.
+3. Adding a central config & template extension components & file to easily extend and manage your Fallback UI.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autosuspense",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Automatic suspense wiring block for React.",
   "license": "ISC",
   "type": "commonjs",