react-usespinner 1.0.1 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.DEV.md +1 -0
- package/README.md +74 -78
- package/package.json +75 -77
package/README.DEV.md
CHANGED
package/README.md
CHANGED
@@ -1,79 +1,75 @@
|
|
1
|
-
# useSpinner
|
2
|
-
|
3
|
-
Wraps action calls that can be grouped together to display a spinner while 1 or more is active. By default an action will be marked as complete after 10 seconds.
|
4
|
-
|
5
|
-
Any item that may require an indication of processing may be considered an action. For example a fetch call, or a long running process.
|
6
|
-
|
7
|
-
Typically before a fetch is started, an action would be started for the fetch. Once the fetch rresolves or is in error then the action can be ended
|
8
|
-
|
9
|
-
```javascript
|
10
|
-
start("slowapi") // start action
|
11
|
-
console.log("Starting slowapi action")
|
12
|
-
fetch("https://flash-the-slow-api.herokuapp.com/delay/3000")
|
13
|
-
.then(res => res.text())
|
14
|
-
.then(data => console.log(data))
|
15
|
-
.finally(() => {
|
16
|
-
console.log("Ending slowapi action")
|
17
|
-
end("slowapi") // finally end action
|
18
|
-
})
|
19
|
-
```
|
20
|
-
|
21
|
-
## Usage
|
22
|
-
|
23
|
-
```
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
if
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
start("genericname", { delay: 20000})
|
76
|
-
start("genericname", { delay: 30000})
|
77
|
-
|
78
|
-
end("genericname"); // will mark all three actions as complete as they have the same name
|
1
|
+
# useSpinner
|
2
|
+
|
3
|
+
Wraps action calls that can be grouped together to display a spinner while 1 or more is active. By default an action will be marked as complete after 10 seconds.
|
4
|
+
|
5
|
+
Any item that may require an indication of processing may be considered an action. For example a fetch call, or a long running process.
|
6
|
+
|
7
|
+
Typically before a fetch is started, an action would be started for the fetch. Once the fetch rresolves or is in error then the action can be ended
|
8
|
+
|
9
|
+
```javascript
|
10
|
+
start("slowapi") // start action
|
11
|
+
console.log("Starting slowapi action")
|
12
|
+
fetch("https://flash-the-slow-api.herokuapp.com/delay/3000")
|
13
|
+
.then(res => res.text())
|
14
|
+
.then(data => console.log(data))
|
15
|
+
.finally(() => {
|
16
|
+
console.log("Ending slowapi action")
|
17
|
+
end("slowapi") // finally end action
|
18
|
+
})
|
19
|
+
```
|
20
|
+
|
21
|
+
## Usage
|
22
|
+
|
23
|
+
```javascript
|
24
|
+
import useSpinner from './hooks/usespinner';
|
25
|
+
|
26
|
+
const { start, end, clear, busy, SpinnerContainer } = useSpinner();
|
27
|
+
|
28
|
+
// To start a new action
|
29
|
+
start("10 Second timer")
|
30
|
+
|
31
|
+
// To end an existing action
|
32
|
+
end("10 Second timer")
|
33
|
+
|
34
|
+
// clear all actions
|
35
|
+
clear();
|
36
|
+
|
37
|
+
// Check if any actions currently running
|
38
|
+
if (busy()) {
|
39
|
+
console.log("There are actions running")
|
40
|
+
}
|
41
|
+
|
42
|
+
// Display a spinner (if any actions are running)
|
43
|
+
<SpinnerContainer>
|
44
|
+
LOADING
|
45
|
+
</SpinnerContainer>
|
46
|
+
```
|
47
|
+
|
48
|
+
## Configuration
|
49
|
+
|
50
|
+
A global timeout can be configured, by default this is 10 seconds
|
51
|
+
|
52
|
+
```javascript
|
53
|
+
// to set a global delay of 1 second
|
54
|
+
const { start, end, clear, SpinnerContainer } = useSpinner({ delay: 1000 });
|
55
|
+
```
|
56
|
+
|
57
|
+
Each action can also be configurred with a configurable timeout
|
58
|
+
```javascript
|
59
|
+
// To start a new action that may take up to 60 seconds
|
60
|
+
start("10 Second timer", { delay: 60000 })
|
61
|
+
```
|
62
|
+
|
63
|
+
The action will be kept active based on (in order), action delay, global delay, 10 seconds
|
64
|
+
|
65
|
+
## ending actions
|
66
|
+
|
67
|
+
calling the end action method will immediatly close all actions with the given name, irrespective to when they were started, if mutiple actions with the same name are to be started each must be uniquely identified by name
|
68
|
+
|
69
|
+
```javascript
|
70
|
+
start("genericname", { delay: 10000})
|
71
|
+
start("genericname", { delay: 20000})
|
72
|
+
start("genericname", { delay: 30000})
|
73
|
+
|
74
|
+
end("genericname"); // will mark all three actions as complete as they have the same name
|
79
75
|
```
|
package/package.json
CHANGED
@@ -1,77 +1,75 @@
|
|
1
|
-
{
|
2
|
-
"name": "react-usespinner",
|
3
|
-
"version": "1.0.
|
4
|
-
"description": "track actions in progress to know if a spinner should be display. Actions expire within 10 seconds if not expired in code",
|
5
|
-
"private": false,
|
6
|
-
"license": "MIT",
|
7
|
-
"main": "dist/index.js",
|
8
|
-
"author": "cairnswm",
|
9
|
-
"repository": {
|
10
|
-
"type": "git",
|
11
|
-
"url": "https://github.com/cairnswm/usespinner.git"
|
12
|
-
},
|
13
|
-
"peerDependencies": {
|
14
|
-
"bootstrap": "^5.1.3",
|
15
|
-
"react": "17-18",
|
16
|
-
"react-bootstrap": "^2.0.4",
|
17
|
-
"react-dom": "17-18",
|
18
|
-
"react-scripts": "4-5"
|
19
|
-
},
|
20
|
-
"devDependencies": {
|
21
|
-
"@testing-library/jest-dom": "^5.16.5",
|
22
|
-
"@testing-library/react": "^13.4.0",
|
23
|
-
"@testing-library/user-event": "^13.5.0",
|
24
|
-
"@types/jest": "^27.5.2",
|
25
|
-
"@types/node": "^16.18.3",
|
26
|
-
"@types/react": "^18.0.25",
|
27
|
-
"@types/react-dom": "^18.0.9",
|
28
|
-
"cross-env": "^7.0.3",
|
29
|
-
"react": "17-18",
|
30
|
-
"react-dom": "17-18",
|
31
|
-
"react-scripts": "4-5",
|
32
|
-
"typescript": "^4.9.3",
|
33
|
-
"web-vitals": "^2.1.4"
|
34
|
-
|
35
|
-
|
36
|
-
"react"
|
37
|
-
|
38
|
-
|
39
|
-
"
|
40
|
-
"
|
41
|
-
|
42
|
-
|
43
|
-
"
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
"
|
48
|
-
|
49
|
-
|
50
|
-
"
|
51
|
-
"
|
52
|
-
"
|
53
|
-
|
54
|
-
|
55
|
-
"
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
"
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
}
|
77
|
-
}
|
1
|
+
{
|
2
|
+
"name": "react-usespinner",
|
3
|
+
"version": "1.0.2",
|
4
|
+
"description": "track actions in progress to know if a spinner should be display. Actions expire within 10 seconds if not expired in code",
|
5
|
+
"private": false,
|
6
|
+
"license": "MIT",
|
7
|
+
"main": "dist/index.js",
|
8
|
+
"author": "cairnswm",
|
9
|
+
"repository": {
|
10
|
+
"type": "git",
|
11
|
+
"url": "https://github.com/cairnswm/react-usespinner.git"
|
12
|
+
},
|
13
|
+
"peerDependencies": {
|
14
|
+
"bootstrap": "^5.1.3",
|
15
|
+
"react": "17-18",
|
16
|
+
"react-bootstrap": "^2.0.4",
|
17
|
+
"react-dom": "17-18",
|
18
|
+
"react-scripts": "4-5"
|
19
|
+
},
|
20
|
+
"devDependencies": {
|
21
|
+
"@testing-library/jest-dom": "^5.16.5",
|
22
|
+
"@testing-library/react": "^13.4.0",
|
23
|
+
"@testing-library/user-event": "^13.5.0",
|
24
|
+
"@types/jest": "^27.5.2",
|
25
|
+
"@types/node": "^16.18.3",
|
26
|
+
"@types/react": "^18.0.25",
|
27
|
+
"@types/react-dom": "^18.0.9",
|
28
|
+
"cross-env": "^7.0.3",
|
29
|
+
"react": "17-18",
|
30
|
+
"react-dom": "17-18",
|
31
|
+
"react-scripts": "4-5",
|
32
|
+
"typescript": "^4.9.3",
|
33
|
+
"web-vitals": "^2.1.4",
|
34
|
+
"@babel/cli": "^7.19.3",
|
35
|
+
"@babel/preset-env": "^7.20.2",
|
36
|
+
"@babel/preset-react": "^7.18.6"
|
37
|
+
},
|
38
|
+
"keywords": [
|
39
|
+
"react",
|
40
|
+
"react hooks",
|
41
|
+
"fetch",
|
42
|
+
"spinner",
|
43
|
+
"actions"
|
44
|
+
],
|
45
|
+
"files": [
|
46
|
+
"dist",
|
47
|
+
"README.md"
|
48
|
+
],
|
49
|
+
"scripts": {
|
50
|
+
"start": "react-scripts start",
|
51
|
+
"build": "react-scripts build",
|
52
|
+
"test": "react-scripts test",
|
53
|
+
"eject": "react-scripts eject",
|
54
|
+
"clean": "rimraf dist",
|
55
|
+
"compile": "npm run clean && cross-env NODE_ENV=production babel src/hooks --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__"
|
56
|
+
},
|
57
|
+
"eslintConfig": {
|
58
|
+
"extends": [
|
59
|
+
"react-app",
|
60
|
+
"react-app/jest"
|
61
|
+
]
|
62
|
+
},
|
63
|
+
"browserslist": {
|
64
|
+
"production": [
|
65
|
+
">0.2%",
|
66
|
+
"not dead",
|
67
|
+
"not op_mini all"
|
68
|
+
],
|
69
|
+
"development": [
|
70
|
+
"last 1 chrome version",
|
71
|
+
"last 1 firefox version",
|
72
|
+
"last 1 safari version"
|
73
|
+
]
|
74
|
+
}
|
75
|
+
}
|