Skip to content

Commit af888c9

Browse files
shtaifshtaif
authored
docs(readme): edit some wordings, fix some code blocks rendered unformatted (#77)
1 parent ca6dcea commit af888c9

File tree

1 file changed

+92
-94
lines changed

1 file changed

+92
-94
lines changed

‎README.md

Lines changed: 92 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
Async iterables/iterators are a native language construct in JS that can be viewed as a counterpart to [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), in the sense that while a promise asynchronously resolves one value - an async iterable is a stream that asynchronously yields any number of values.
2323

24-
Somewhat obvious to say, the React ecosystem features many methods and tools that have to do with integrating promise-based data into your React components; from higher level SDK libraries, state managers - to generic async utilities, which make the different promise states available to the rendering. And just like that - `react-async-iterators` packs hooks, components and utilities written in TypeScript with the aim to make async iterables into __first-class citizens to React__ as they become gradually more prevalent across the JavaScript platform.
24+
Somewhat obvious to say, the React ecosystem features many methods and tools that have to do with integrating promise-based data into your React components; from higher level SDK libraries, state managers - to generic async utilities, which make the different promise states available to the rendering. And just like that - `react-async-iterators` packs hooks, components and utilities written in TypeScript with the aim to make async iterables into __first-class citizens to React__ as they become gradually more prevalent across JavaScript platforms.
2525

2626
What can `react-async-iterators` be used for?
2727

@@ -669,8 +669,8 @@ Essentially, can be seen as a [`useAsyncIter`](#useasynciter) hook in a componen
669669

670670
<details>
671671
<summary><b><i>Additional examples</i></b></summary>
672-
673672
<br/>
673+
<ul>
674674

675675
```tsx
676676
import { It } from 'react-async-iterators';
@@ -736,6 +736,8 @@ Essentially, can be seen as a [`useAsyncIter`](#useasynciter) hook in a componen
736736
);
737737
}
738738
```
739+
740+
</ul>
739741
</details>
740742

741743

@@ -778,97 +780,96 @@ It's similar to [`<It>`](#it), only it works with any changeable number of async
778780
<details>
779781
<summary><b><i>Additional examples</i></b></summary>
780782
<br/>
781-
782783
<ul>
783784

784-
```tsx
785-
import { useMemo } from 'react';
786-
import { ItMulti } from 'react-async-iterators';
785+
```tsx
786+
import { useMemo } from 'react';
787+
import { ItMulti } from 'react-async-iterators';
787788

788-
function MyComponent() {
789-
const numberIter = useMemo(() => createNumberIter(), []);
790-
const arrayIter = useMemo(() => createArrayIter(), []);
791-
return (
792-
<>
793-
<Header />
794-
<SideMenu />
795-
<main>
796-
<ItMulti values={[numberIter, arrayIter]} initialValues={[0, []]}>
797-
{([numState, arrState]) => (
798-
<>
799-
<div>
800-
{numState.pendingFirst
801-
? '⏳ Loading number...'
802-
: `Current number: ${numState.value}`}
803-
</div>
804-
<div>
805-
{arrState.pendingFirst
806-
? '⏳ Loading items...'
807-
: arrState.value.map((item, i) => <div key={i}>{item}</div>)}
808-
</div>
809-
</>
810-
)}
811-
</ItMulti>
812-
</main>
813-
</>
814-
)
815-
}
816-
```
789+
function MyComponent() {
790+
const numberIter = useMemo(() => createNumberIter(), []);
791+
const arrayIter = useMemo(() => createArrayIter(), []);
792+
return (
793+
<>
794+
<Header />
795+
<SideMenu />
796+
<main>
797+
<ItMulti values={[numberIter, arrayIter]} initialValues={[0, []]}>
798+
{([numState, arrState]) => (
799+
<>
800+
<div>
801+
{numState.pendingFirst
802+
? '⏳ Loading number...'
803+
: `Current number: ${numState.value}`}
804+
</div>
805+
<div>
806+
{arrState.pendingFirst
807+
? '⏳ Loading items...'
808+
: arrState.value.map((item, i) => <div key={i}>{item}</div>)}
809+
</div>
810+
</>
811+
)}
812+
</ItMulti>
813+
</main>
814+
</>
815+
)
816+
}
817+
```
817818

818-
<br/>
819+
<br/>
819820

820-
```tsx
821-
// Using `<ItMulti>` with a dynamically changing amount of inputs:
822-
823-
import { useState } from 'react';
824-
import { ItMulti, type MaybeAsyncIterable } from 'react-async-iterators';
825-
826-
function DynamicInputsComponent() {
827-
const [inputs, setInputs] = useState<MaybeAsyncIterable<string>[]>([]);
828-
829-
const addAsyncIterValue = () => {
830-
const iterableValue = (async function* () {
831-
for (let i = 0; i < 10; i++) {
832-
await new Promise(resolve => setTimeout(resolve, 500));
833-
yield `Item ${i}`;
834-
}
835-
})();
836-
setInputs(prev => [iterableValue, ...prev]);
837-
};
838-
839-
const addStaticValue = () => {
840-
const staticValue = `Static ${inputs.length + 1}`;
841-
setInputs(prev => [staticValue, ...prev]);
842-
};
843-
844-
return (
845-
<div>
846-
<h3>Dynamic Concurrent Async Iteration</h3>
847-
848-
<button onClick={addAsyncIterValue}>🔄 Add Async Iterable</button>
849-
<button onClick={addStaticValue}>🗿 Add Static Value</button>
850-
851-
<ul>
852-
<ItMulti values={inputs} defaultInitialValue="">
853-
{states =>
854-
states.map((state, i) => (
855-
<li key={i}>
856-
{state.done
857-
? state.error
858-
? `Error: ${state.error}`
859-
: 'Done'
860-
: state.pendingFirst
861-
? 'Pending...'
862-
: `Value: ${state.value}`}
863-
</li>
864-
))
865-
}
866-
</ItMulti>
867-
</ul>
868-
</div>
869-
);
870-
}
871-
```
821+
```tsx
822+
// Using `<ItMulti>` with a dynamically changing amount of inputs:
823+
824+
import { useState } from 'react';
825+
import { ItMulti, type MaybeAsyncIterable } from 'react-async-iterators';
826+
827+
function DynamicInputsComponent() {
828+
const [inputs, setInputs] = useState<MaybeAsyncIterable<string>[]>([]);
829+
830+
const addAsyncIterValue = () => {
831+
const iterableValue = (async function* () {
832+
for (let i = 0; i < 10; i++) {
833+
await new Promise(resolve => setTimeout(resolve, 500));
834+
yield `Item ${i}`;
835+
}
836+
})();
837+
setInputs(prev => [iterableValue, ...prev]);
838+
};
839+
840+
const addStaticValue = () => {
841+
const staticValue = `Static ${inputs.length + 1}`;
842+
setInputs(prev => [staticValue, ...prev]);
843+
};
844+
845+
return (
846+
<div>
847+
<h3>Dynamic Concurrent Async Iteration</h3>
848+
849+
<button onClick={addAsyncIterValue}>🔄 Add Async Iterable</button>
850+
<button onClick={addStaticValue}>🗿 Add Static Value</button>
851+
852+
<ul>
853+
<ItMulti values={inputs} defaultInitialValue="">
854+
{states =>
855+
states.map((state, i) => (
856+
<li key={i}>
857+
{state.done
858+
? state.error
859+
? `Error: ${state.error}`
860+
: 'Done'
861+
: state.pendingFirst
862+
? 'Pending...'
863+
: `Value: ${state.value}`}
864+
</li>
865+
))
866+
}
867+
</ItMulti>
868+
</ul>
869+
</div>
870+
);
871+
}
872+
```
872873

873874
</ul>
874875

@@ -915,8 +916,8 @@ next.error;
915916

916917
<details>
917918
<summary><b><i>Additional examples</i></b></summary>
918-
919919
<br/>
920+
<ul>
920921

921922
```tsx
922923
import { useAsyncIter } from 'react-async-iterators';
@@ -964,6 +965,8 @@ next.error;
964965
);
965966
}
966967
```
968+
969+
<ul>
967970
</details>
968971

969972

@@ -1009,9 +1012,7 @@ const [nextNum, nextStr, nextArr] = useAsyncIterMulti([numberIter, stringIter, a
10091012

10101013
<details>
10111014
<summary><b><i>Additional examples</i></b></summary>
1012-
10131015
<br/>
1014-
10151016
<ul>
10161017

10171018
```tsx
@@ -1172,9 +1173,7 @@ function handleValueSubmit() {
11721173

11731174
<details>
11741175
<summary><b><i>Additional examples</i></b></summary>
1175-
11761176
<br/>
1177-
11781177
<ul>
11791178

11801179
```tsx
@@ -1277,7 +1276,6 @@ iterateFormatted(myIter, (value, idx) => {
12771276
<details>
12781277
<summary><b><i>Additional examples</i></b></summary>
12791278
<br/>
1280-
12811279
<ul>
12821280

12831281
```tsx

0 commit comments

Comments
 (0)