react-promise - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/cjs/usePromise.d.ts

@@ -1,2 +0,2 @@
-export default function usePromise<T>(promise: Promise<T>): {
+export default function usePromise<T>(promiseOrFn: (() => Promise<T>) | Promise<T>): {
     loading: boolean;
@@ -3,0 +3,0 @@ error: Error | null;

dist/cjs/usePromise.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-function usePromise(promise) {
+function usePromise(promiseOrFn) {
     var _a = react_1.useState({
-        loading: !!promise,
+        loading: !!promiseOrFn,
         error: null,
@@ -12,3 +12,3 @@ value: undefined
         var unmounted = false;
-        if (!promise) {
+        if (!promiseOrFn) {
             setState({
@@ -28,2 +28,9 @@ loading: false,
             }
+            var promise = void 0;
+            if (typeof promiseOrFn === 'function') {
+                promise = promiseOrFn();
+            }
+            else {
+                promise = promiseOrFn;
+            }
             promise
@@ -52,3 +59,3 @@ .then(function (value) {
         };
-    }, [promise]);
+    }, [promiseOrFn]);
     return state;
@@ -55,0 +62,0 @@ }

dist/esm/usePromise.d.ts

@@ -1,2 +0,2 @@
-export default function usePromise<T>(promise: Promise<T>): {
+export default function usePromise<T>(promiseOrFn: (() => Promise<T>) | Promise<T>): {
     loading: boolean;
@@ -3,0 +3,0 @@ error: Error | null;

dist/esm/usePromise.js

 import { useEffect, useState } from 'react';
-export default function usePromise(promise) {
+export default function usePromise(promiseOrFn) {
     const [state, setState] = useState({
-        loading: !!promise,
+        loading: !!promiseOrFn,
         error: null,
@@ -10,3 +10,3 @@ value: undefined
         let unmounted = false;
-        if (!promise) {
+        if (!promiseOrFn) {
             setState({
@@ -26,2 +26,9 @@ loading: false,
             }
+            let promise;
+            if (typeof promiseOrFn === 'function') {
+                promise = promiseOrFn();
+            }
+            else {
+                promise = promiseOrFn;
+            }
             promise
@@ -50,5 +57,5 @@ .then((value) => {
         };
-    }, [promise]);
+    }, [promiseOrFn]);
     return state;
 }
 //# sourceMappingURL=usePromise.js.map

package.json

 {
   "name": "react-promise",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "source": "src/usePromise.ts",
@@ -16,3 +16,4 @@ "main": "dist/cjs/usePromise.js",
     "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
-    "test": "jest"
+    "test": "jest",
+    "jw": "jest --watch"
   },
@@ -19,0 +20,0 @@ "devDependencies": {

README.md

@@ -30,3 +30,3 @@ # react-promise
   render () {
-    if (!this.state.val) return
+    if (!this.state.val) return null
     return <div>{this.state.val}</div>
@@ -44,4 +44,4 @@ }
 const ExampleWithAsync = (props) => {
-  const {value} = usePromise<string>(prom)
-
+  const {value, loading} = usePromise<string>(prom)
+  if (loading) return null
   return <div>{value}</div>}
@@ -51,9 +51,21 @@ }
 
-Full state object returned by the hook looks like:
+## API
 
+The only argument can be a promise or a promise resolving thunk:
+
 ```ts
+usePromise<T>(
+  promiseOrFn: (() => Promise<T>) | Promise<T>
+)
+```
+
+it might be desirable to let the usePromise call the promise returnig function, because you often don't want to do that inside the render of your functional component.
+
+Full state object interface returned by the hook looks like:
+
+```ts
 {
   loading: boolean
   error: Error | null
-  value: T | undefined
+  value: T | undefined // where T is your shape of the resolved data you expect obviously
 }
@@ -60,0 +72,0 @@ ```

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9075

increased by15.8%

Lines of code

127

increased by12.39%

Number of lines in readme file

80

increased by17.65%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes