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
+15-7
Original file line number
Diff line number
Diff line change
@@ -13,11 +13,15 @@
13
13
14
14
</p>
15
15
16
-
A React.js library that makes it __easy and satisfying__ to integrate and render JS async iterators across and throughout your app's components. Expanding from that, it allows you to describe and propagate various aspects and states of your app in actual async iterator form, letting it tap into the full benefits and flexibility in this JS construct.
16
+
A React.js library that makes it __easy and satisfying__ to integrate and render JS async iterators across and throughout your app's components. Expanding from that, it enables you to describe and propagate states and various aspects of your app in actual async iterator form, tapping into the full benefits and flexibility of this JS construct.
17
17
18
+
The goal behind this library is to promote a mental model where fundamentally every piece of data in a JavaScript program can be expressed in either a plain and static form, or in a ___dynamic, self-evolving form - an async iterable___. By simply wrapping a value in an async iterator or iterable, it becomes a self-updating entity while remaining first-class data. From this, it follows naturally that every interface should and could accommodate either kind of inputs, seamlessly adapting to changes over time as intuitively expected.
18
19
20
+
To facilitate this, `react-async-iterators` offers a set of tools specifically tailored for the frontend and React which and embraces composability with the upcoming standardization of [Async Iterator Helpers proposal](https://github.com/tc39/proposal-async-iterator-helpers) as well as projects such as [iter-tools](https://github.com/iter-tools/iter-tools), [IxJS](https://github.com/ReactiveX/IxJS) and more.
19
21
20
-
### Illustration:
22
+
23
+
24
+
### Illustration
21
25
22
26
[](https://stackblitz.com/edit/react-async-iterators-example-3?file=src%2FApp.tsx)
23
27
@@ -27,7 +31,7 @@ import { It } from 'react-async-iterators';
27
31
const randoms = {
28
32
async*[Symbol.asyncIterator]() {
29
33
while (true) {
30
-
awaitnewPromise((r)=>setTimeout(r, 500));
34
+
awaitnewPromise(r=>setTimeout(r, 500));
31
35
const x =Math.random();
32
36
yieldMath.round(x*10);
33
37
}
@@ -58,11 +62,15 @@ const randoms = {
58
62
// etc.
59
63
```
60
64
61
-
Below is another interactive demo showing how to consume the `EventSource` web API (A.K.A [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
62
65
63
-
[](https://stackblitz.com/edit/react-async-iterators-example-5?file=src%2FApp.tsx)
64
66
67
+
### More examples
68
+
69
+
- Interactive demo showing how to consume the `EventSource` web API ([Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
70
+
<br/><br/>[](https://stackblitz.com/edit/react-async-iterators-example-5?file=src%2FApp.tsx)
65
71
72
+
- Interactive demo showing how to consume a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) converted into async iterable using the [`iterified`](https://github.com/shtaif/iterified) package:
73
+
<br/><br/>[](https://stackblitz.com/edit/react-async-iterators-example-6?file=src%2FApp.tsx)
66
74
67
75
<!--
68
76
```tsx
@@ -173,7 +181,7 @@ Slightly obvious to say, the React ecosystem is featuring many methods and tools
173
181
174
182
- When apps involve any _asynchronously-generated series_ of data, such as data updated via recurring timers, WebSocket messages, GraphQL subscriptions, Geolocation watching and more...
175
183
176
-
- When rendering a complex form or dynamic widget with large nested component tree for which UI updates might impact UI performance.
184
+
- When rendering a complex form or dynamic widget with large nested component tree for which updates might impact UI performance.
177
185
178
186
179
187
@@ -223,7 +231,7 @@ import { It, type IterationResult } from 'react-async-iterators';
223
231
224
232
Async iterables can be hooked into your components and consumed using [`<It>`](#it) and [`<ItMulti>`](#itmulti), or their hook counterparts [`useAsyncIter`](#useasynciter) and [`useAsyncIterMulti`](#useasyncitermulti) respectively.
225
233
226
-
The iteration values and states are expressed via a consistent structure (see exaustive list in [this breakdown](#iteration-state-object-detailed-breakdown)).<br/>
234
+
The iteration values and states are expressed via a consistent structure (see exaustive list in [this breakdown](#iteration-state-properties-breakdown)).<br/>
0 commit comments