Skip to content

Commit 44db9ce

Browse files
committed
Add documentation for lastPostAt.
1 parent e3fcd4b commit 44db9ce

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ any messages or errors it sends, as well as the `postMessage` handler.
1616
- Provides timestamped `messages` and `errors`
1717
- Provides easy access to the last message `data` and last `error`
1818
- Provides `postMessage` to send messages to the Web Worker
19+
- Provides `updatedAt` and `lastPostAt` metadata
1920
- Accepts `onMessage` and `onError` callbacks
2021

2122
> This package was modeled after [`<Async>`](https://github.com/ghengeveld/react-async) which helps you deal with Promises in React.
@@ -92,6 +93,32 @@ const MyComponent = () => (
9293
- `updatedAt` {Date} when the last message or error was received
9394
- `postMessage` {Function} sends a message to the Web Worker
9495

96+
## Examples
97+
98+
### Using `lastPostAt` to show a loading indicator
99+
100+
```js
101+
import WebWorker from "react-webworker"
102+
103+
const MyComponent = () => (
104+
<WebWorker path="/worker.js">
105+
{({ data, error, postMessage, updatedAt, lastPostAt }) => (
106+
<div>
107+
{data && (
108+
<div>
109+
<strong>Received some data:</strong>
110+
<pre>{JSON.stringify(data, null, 2)}</pre>
111+
</div>
112+
)}
113+
<button onClick={() => postMessage("hello")} disabled={updatedAt < lastPostAt}>
114+
{updatedAt < lastPostAt ? "Loading..." : "Go"}
115+
</button>
116+
</div>
117+
)}
118+
</WebWorker>
119+
)
120+
```
121+
95122
## Helper components
96123

97124
`<WebWorker>` provides several helper components that make your JSX even more declarative.

0 commit comments

Comments
 (0)