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.
Files changed (3) hide show
  1. package/README.DEV.md +1 -0
  2. package/README.md +74 -78
  3. package/package.json +75 -77
package/README.DEV.md CHANGED
@@ -2,5 +2,6 @@
2
2
  # Publish component
3
3
  ```
4
4
  npm run compile
5
+ npm login
5
6
  npm publish
6
7
  ```
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
- npm i react-usespinner
25
- ```
26
-
27
- ```javascript
28
- import useSpinner from 'react-usespinner';
29
-
30
- const { start, end, clear, busy, SpinnerContainer } = useSpinner();
31
-
32
- // To start a new action
33
- start("10 Second timer")
34
-
35
- // To end an existing action
36
- end("10 Second timer")
37
-
38
- // clear all actions
39
- clear();
40
-
41
- // Check if any actions currently running
42
- if (busy()) {
43
- console.log("There are actions running")
44
- }
45
-
46
- // Display a spinner (if any actions are running)
47
- <SpinnerContainer>
48
- LOADING
49
- </SpinnerContainer>
50
- ```
51
-
52
- ## Configuration
53
-
54
- A global timeout can be configured, by default this is 10 seconds
55
-
56
- ```javascript
57
- // to set a global delay of 1 second
58
- const { start, end, clear, SpinnerContainer } = useSpinner({ delay: 1000 });
59
- ```
60
-
61
- Each action can also be configurred with a configurable timeout
62
- ```javascript
63
- // To start a new action that may take up to 60 seconds
64
- start("10 Second timer", { delay: 60000 })
65
- ```
66
-
67
- The action will be kept active based on (in order), action delay, global delay, 10 seconds
68
-
69
- ## ending actions
70
-
71
- 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
72
-
73
- ```javascript
74
- start("genericname", { delay: 10000})
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.1",
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
- "keywords": [
36
- "react",
37
- "react hooks",
38
- "fetch",
39
- "spinner",
40
- "actions"
41
- ],
42
- "files": [
43
- "dist",
44
- "README.md"
45
- ],
46
- "scripts": {
47
- "start": "react-scripts start",
48
- "build": "react-scripts build",
49
- "test": "react-scripts test",
50
- "eject": "react-scripts eject",
51
- "clean": "rimraf dist",
52
- "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__"
53
- },
54
- "eslintConfig": {
55
- "extends": [
56
- "react-app",
57
- "react-app/jest"
58
- ]
59
- },
60
- "browserslist": {
61
- "production": [
62
- ">0.2%",
63
- "not dead",
64
- "not op_mini all"
65
- ],
66
- "development": [
67
- "last 1 chrome version",
68
- "last 1 firefox version",
69
- "last 1 safari version"
70
- ]
71
- },
72
- "dependencies": {
73
- "@babel/cli": "^7.19.3",
74
- "@babel/preset-env": "^7.20.2",
75
- "@babel/preset-react": "^7.18.6"
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
+ }