react-usespinner 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -72,4 +72,8 @@ start("genericname", { delay: 20000})
72
72
  start("genericname", { delay: 30000})
73
73
 
74
74
  end("genericname"); // will mark all three actions as complete as they have the same name
75
- ```
75
+ ```
76
+
77
+ ## Custom fetch
78
+
79
+ useSpinner also exports it's own fetch method. This method is compatible with a normal browser fetch but creates a unique action id that is tracked by the useSpinner actions
@@ -1,5 +1,2 @@
1
- import useSpinner from "./usespinner";
2
-
3
- export {
4
- useSpinner
5
- }
1
+ import useSpinner from "./usespinner";
2
+ export { useSpinner };
@@ -47,6 +47,31 @@ const useSpinner = (globalOptions?: Options) => {
47
47
  return actions && actions.length > 0
48
48
  }
49
49
 
50
+ const createUUID = () => {
51
+ // https://www.arungudelli.com/tutorial/javascript/how-to-create-uuid-guid-in-javascript-with-examples/
52
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
53
+ var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
54
+ return v.toString(16);
55
+ });
56
+ }
57
+ const fetch = (...params: any) => {
58
+ const id = createUUID();
59
+ start(id)
60
+ return new Promise((resolve, reject) => {
61
+ let config = params[1] || {};
62
+ fetch(params[0], config)
63
+ .then((res) => {
64
+ resolve(res);
65
+ })
66
+ .catch((err) => {
67
+ reject(err);
68
+ })
69
+ .finally(()=>{
70
+ end(id);
71
+ });
72
+ });
73
+ };
74
+
50
75
  // JSX component used to wrap spinner of choice
51
76
  const SpinnerContainer = ({ children }: SpinnerProps) => {
52
77
  // If no active Actions then dont display anything
@@ -58,7 +83,7 @@ const useSpinner = (globalOptions?: Options) => {
58
83
  };
59
84
 
60
85
  // return hook values
61
- return { start, end, clear, busy, SpinnerContainer };
86
+ return { start, end, clear, busy, fetch, SpinnerContainer };
62
87
  };
63
88
 
64
89
  export default useSpinner;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-usespinner",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
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
5
  "private": false,
6
6
  "license": "MIT",