Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit af888c9

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /