react-use-state-async - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.d.ts

@@ -10,3 +10,3 @@ declare type DataType = {
 }
-declare const useAsyncMemo: (callback: Function, dependencies: any[]) => UseStateAsyncType;
-export default useAsyncMemo;
+declare const useStateAsync: (callback: Function, dependencies: any[]) => UseStateAsyncType;
+export default useStateAsync;

dist/index.js

@@ -70,7 +70,7 @@ 'use strict';
 
-var useAsyncMemo = function (callback, dependencies) {
+var useStateAsync = function (callback, dependencies) {
     var _a = react.useState({
         isLoading: false,
         data: null,
-        error: null
+        error: null,
     }), data = _a[0], setData = _a[1];
@@ -110,7 +110,7 @@ var handleFetch = react.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         setData: handleSetData,
-        fetch: handleFetch
+        fetch: handleFetch,
     };
 };
 
-exports.default = useAsyncMemo;
+exports.default = useStateAsync;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-use-state-async",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A custom hook trigger call async function each dependencies changes. Support holding and updating for fetch data.",
@@ -9,3 +9,3 @@ "author": "imvutoan",
     "type": "git",
-    "url": "https://github.com/vutoan266/react-use-state-async"
+    "url": "git+https://github.com/vutoan266/react-use-state-async.git"
   },
@@ -12,0 +12,0 @@ "homepage": "https://github.com/vutoan266/react-use-state-async/README.md",

README.md

 # react-use-state-async
 
->
+A custom hook trigger call async function each dependencies changes. Support holding and updating for fetch data.
 
-[![NPM](https://img.shields.io/npm/v/react-use-state-async.svg)](https://www.npmjs.com/package/react-use-state-async) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+### [Demo](https://codesandbox.io/s/react-use-state-async-4eug6)
 
-# use-state-async
-
-A custom hook trigger call async function each dependencies changes. Support holding and updating for fetch data.
-
 ## Install
@@ -31,20 +27,35 @@
 
+const getSomethingApi = (id) => {
+  return new Promise((res, rej) => {
+    setTimeout(() => {
+      if (id % 2 === 0) res({ id, fakeData: true });
+      rej("cannot get data");
+    }, 2000);
+  });
+};
+
 export default function App() {
-  const [url, setUrl] = React.useState("");
-  const { isLoading, data, error, setData, fetch } = useStateAsync(() => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve("api data");
-      }, 1000);
-    });
-  }, [url]);
+  const [id, setId] = React.useState(0);
+  const { isLoading, setData, fetch, data, error } = useStateAsync(async () => {
+    // do async action
+    try {
+      const res = await getSomethingApi(id);
+      return res;
+    } catch (e) {
+      throw e;
+    }
+  }, [id]);
 
   return (
     <div>
-      <button onClick={() => setUrl("https://urlapi.com")}>Change url</button>
+      <button onClick={() => setId((previousId) => previousId + 1)}>
+        Fetch data with increase Id
+      </button>
       <button onClick={() => fetch()}>Refetch api</button>
-      <button onClick={() => setData("new data")}>Update data</button>
+      <button onClick={() => setData({ ...data, update: true })}>
+        Update data
+      </button>
       {isLoading ? <p>Loading</p> : <p>Loaded</p>}
-      {data && <p>{data}</p>}
-      {error && <p>{error}</p>}
+      {data && <p>{JSON.stringify(data)}</p>}
+      {error && <p>{JSON.stringify(error)}</p>}
     </div>
@@ -51,0 +62,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

26459

increased by0.97%

Number of package files

7

increased by40%

Lines of code

117

increased by1.74%

Number of lines in readme file

87

increased by14.47%

No dependency changes