react-sync-ui 0.1.3 → 0.1.4
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 +20 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,6 +38,23 @@ export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
|
38
38
|
);
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
## what problem 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 operations and what is going on.
|
|
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 variable value, the different components will register the dependency change inside of `useEffect`, and some other code is called.
|
|
49
|
+
With this event-driven programming, your code complexity is at least 1000 times more complex, and your newcomers who see the code have no idea what 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 may implement just your custom UI and don't have to care about the implementation detail of promise wrapping.
|
|
55
|
+
|
|
56
|
+
And that's why `react-sync-ui` was created. ❤
|
|
57
|
+
|
|
41
58
|
## Installation
|
|
42
59
|
|
|
43
60
|
```bash
|
|
@@ -65,10 +82,10 @@ root.render(<App />);
|
|
|
65
82
|
|
|
66
83
|
### create sync UI
|
|
67
84
|
|
|
68
|
-
Now, you just have to define your custom
|
|
85
|
+
Now, you just have to define your custom React component which will be promisifed by `makeSyncUI` function.
|
|
69
86
|
|
|
70
|
-
`makeSyncUI` returns Promise which render your custom React Component
|
|
71
|
-
will be resolve when you call `props.resolve(any)`
|
|
87
|
+
`makeSyncUI` returns Promise which render your custom React Component.
|
|
88
|
+
Promise will be resolve when you call `props.resolve(any)` inside of your custom UI.
|
|
72
89
|
|
|
73
90
|
#### Alert example
|
|
74
91
|
|