react-sync-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# react-sync-ui
|
|
2
2
|
|
|
3
|
-
`react-sync-ui`
|
|
3
|
+
`react-sync-ui` promisify your React Components and make your UI awaitable.
|
|
4
4
|
|
|
5
5
|
## usage example
|
|
6
6
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
await syncAlert("Invalid password, keep trying");
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
await syncAlert(`Congratulation
|
|
17
|
+
await syncAlert(`Congratulation ${name}, you are logged in`);
|
|
18
18
|
}}
|
|
19
19
|
>
|
|
20
20
|
Login
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
into the promisified
|
|
26
|
+
`react-sync-ui` provides function `makeSyncUI<InputData, ResolveValue>` which transform your declarative React Components
|
|
27
|
+
into the promisified awaitable functions.
|
|
28
28
|
|
|
29
29
|
```tsx
|
|
30
30
|
// defining of your custom react-sync-ui component
|
|
@@ -38,6 +38,25 @@ export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
|
38
38
|
);
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
## what is `react-sync-ui` solving?
|
|
42
|
+
|
|
43
|
+
For a long time, I did not like that React's functional way of declarative UI forced you to write nice UI code, but with ugly distributed business logic.
|
|
44
|
+
When you have a complex business use case which is a composition of asynchronous actions like HTTP requests together with user interactions,
|
|
45
|
+
your business logic code is distributed over many async React handlers and it's really hard to understand the sequence of business logic.
|
|
46
|
+
|
|
47
|
+
People very often solve this problem by dependencies in the `useEffect(..., [dependency])` which transfer React logic to the event-driven architecture.
|
|
48
|
+
When you change the dependency variable value, the different components will register the dependency change, and `useEffect` will be re-called.
|
|
49
|
+
With this event-driven programming style, your code complexity is 1000 times more complex, and your newcomer programmes who see the code have the business workflow is.
|
|
50
|
+
|
|
51
|
+
A nice solution for this problem is to wrap your declarative React components into Promise wrappers which split your UIs into many
|
|
52
|
+
smaller functions that can be simply composed together inside of your Javascript function and you'll get very complex business logic in just a few lines of code.
|
|
53
|
+
|
|
54
|
+
Thanks to `react-sync-ui` you can simply promisify your React Components UI and make your UI awaitable.
|
|
55
|
+
|
|
56
|
+
And that's why `react-sync-ui` was created. ❤
|
|
57
|
+
|
|
58
|
+
PS: i took inspiration from awesome functions: `window.alert`, `window.confirm` and `window.prompt`.
|
|
59
|
+
|
|
41
60
|
## Installation
|
|
42
61
|
|
|
43
62
|
```bash
|
|
@@ -65,10 +84,10 @@ root.render(<App />);
|
|
|
65
84
|
|
|
66
85
|
### create sync UI
|
|
67
86
|
|
|
68
|
-
Now, you just have to define your custom
|
|
87
|
+
Now, you just have to define your custom React component which will be promisifed by `makeSyncUI` function.
|
|
69
88
|
|
|
70
|
-
`makeSyncUI` returns Promise which render your custom React Component
|
|
71
|
-
will be resolve when you call `props.resolve(any)`
|
|
89
|
+
`makeSyncUI` returns Promise which render your custom React Component.
|
|
90
|
+
Promise will be resolve when you call `props.resolve(any)` inside of your custom UI.
|
|
72
91
|
|
|
73
92
|
#### Alert example
|
|
74
93
|
|