Skip to content

Commit 716b773

Browse files
authored
Update readme.md
1 parent 5c34bc8 commit 716b773

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

readme.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,62 @@
66

77
If you are using some expensive processes inside your webpage, make sure you don't compromise your performance there. Web workers can make your web page feel smooth and realistic
88

9+
## Install
10+
11+
Installing this package is super simple and just like any other package. If you are using npm:
12+
```
13+
npm i react-web-workers
14+
```
15+
16+
But if you are yarn lover:
17+
```
18+
yarn add react-web-workers
19+
```
20+
21+
## Workers
22+
23+
Create as many workers as you want as a function and export them just like this:
24+
```javascript
25+
const message = () => {
26+
let text = 'Hello I am Your Web Worker'
27+
28+
const sentData = () => {
29+
// eslint-disable-next-line no-restricted-globals
30+
self.postMessage({ text })
31+
}
32+
33+
// eslint-disable-next-line no-restricted-globals
34+
self.onmessage = ({ data }) => {
35+
console.log(data)
36+
sentData()
37+
}
38+
}
39+
40+
export default message;
41+
```
42+
43+
## Work with Workers
44+
45+
Once your workers are ready, import ```react-web-workers```
46+
```javascript
47+
import WebWorker from 'react-web-workers';
48+
```
49+
50+
Also import your workers:
51+
```javascript
52+
import message from './workers/message';
53+
...
54+
```
55+
56+
Pass the workers directly as an array:
57+
```javascript
58+
const [messageWorker, ...] = WebWorker([message, ...]);
59+
```
60+
61+
Now you have access to all the web workers functionality with this ```messageWorker``` and all the other workers you've been working with
62+
63+
In case if you're feeling any difficulty, please refer to the example we have in this project.
64+
965
## Features
1066

1167
- Simple to Use

0 commit comments

Comments
 (0)