chakra-confirm - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/chakra-confirm.cjs.development.js

@@ -49,3 +49,4 @@ 'use strict';
     type: 'confirm',
-    isOpen: false
+    isOpen: false,
+    isLoading: false
   },
@@ -96,3 +97,3 @@ setValue: function setValue() {},
 var GlobalConfirmModal = function GlobalConfirmModal() {
-  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14;
+  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14, _value$data15;
 
@@ -155,2 +156,3 @@ var _useContext = React.useContext(confirmContext),
 
+  var CustomForm = (_value$data5 = value.data) == null ? void 0 : _value$data5.customBody;
   return React__default.createElement(react.AlertDialog, {
@@ -160,6 +162,6 @@ isOpen: isOpen,
     onClose: onClose,
-    isCentered: (_value$data5 = value.data) == null ? void 0 : _value$data5.isCentered
+    isCentered: (_value$data6 = value.data) == null ? void 0 : _value$data6.isCentered
   }, React__default.createElement(react.AlertDialogOverlay, null, React__default.createElement(react.AlertDialogContent, null, React__default.createElement(react.AlertDialogHeader, null, React__default.createElement(react.Heading, {
     size: "md"
-  }, ((_value$data6 = value.data) == null ? void 0 : _value$data6.title) || 'Are you sure?')), (((_value$data7 = value.data) == null ? void 0 : _value$data7.actionBody) || ((_value$data8 = value.data) == null ? void 0 : _value$data8.body)) && React__default.createElement(react.AlertDialogBody, null, ((_value$data9 = value.data) == null ? void 0 : _value$data9.actionBody == null ? void 0 : _value$data9.actionBody(onClose)) || ((_value$data10 = value.data) == null ? void 0 : _value$data10.body)), value.type === 'prompt' && React__default.createElement(react.AlertDialogBody, null, React__default.createElement("form", {
+  }, ((_value$data7 = value.data) == null ? void 0 : _value$data7.title) || 'Are you sure?')), (((_value$data8 = value.data) == null ? void 0 : _value$data8.actionBody) || ((_value$data9 = value.data) == null ? void 0 : _value$data9.body)) && React__default.createElement(react.AlertDialogBody, null, ((_value$data10 = value.data) == null ? void 0 : _value$data10.actionBody == null ? void 0 : _value$data10.actionBody(onClose)) || ((_value$data11 = value.data) == null ? void 0 : _value$data11.body)), value.type === 'prompt' && React__default.createElement(react.AlertDialogBody, null, React__default.createElement("form", {
     onSubmit: function onSubmit(e) {
@@ -169,3 +171,5 @@ e.preventDefault();
     }
-  }, React__default.createElement(react.FormControl, null, React__default.createElement(react.Input, {
+  }, CustomForm ? React__default.createElement(CustomForm, {
+    setState: setTmp
+  }) : React__default.createElement(react.FormControl, null, React__default.createElement(react.Input, {
     ref: confirmRef,
@@ -178,5 +182,5 @@ value: tmp,
     onClick: onClose
-  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React__default.createElement(SubmitButton, {
+  }, defaults.cancel), !((_value$data12 = value.data) == null ? void 0 : _value$data12.onlyAlert) && React__default.createElement(SubmitButton, {
     buttonProps: {
-      colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
+      colorScheme: ((_value$data13 = value.data) == null ? void 0 : _value$data13.buttonColor) || 'blue',
       ml: 3
@@ -186,4 +190,4 @@ },
     onClick: onClick,
-    doubleConfirm: ((_value$data13 = value.data) == null ? void 0 : _value$data13.doubleConfirm) || false
-  }, ((_value$data14 = value.data) == null ? void 0 : _value$data14.buttonText) || 'Confirm')))));
+    doubleConfirm: ((_value$data14 = value.data) == null ? void 0 : _value$data14.doubleConfirm) || false
+  }, ((_value$data15 = value.data) == null ? void 0 : _value$data15.buttonText) || 'Confirm')))));
 };
@@ -197,2 +201,3 @@
     isOpen: false,
+    isLoading: false,
     type: 'alert'
@@ -224,2 +229,3 @@ }),
         isOpen: true,
+        isLoading: false,
         data: _extends({}, (_context$defaults = context.defaults) == null ? void 0 : _context$defaults.confirm, init, data, {
@@ -226,0 +232,0 @@ onClick: resolve

dist/chakra-confirm.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("@chakra-ui/react");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var r={prompt:{title:"Enter some data",buttonText:"Submit",buttonColor:"blue"},confirm:{title:"Are you sure?"},delete:{title:"Are you sure?",body:"Are you sure you want to delete this",buttonText:"Delete",buttonColor:"red"},cancel:"Cancel"},u=t.createContext({value:{type:"confirm",isOpen:!1},setValue:function(){},defaults:o({},r)}),a=t.forwardRef((function(e,t){var o=e.onClick,r=e.doubleConfirm,u=e.buttonProps,a=e.children,i=l.useBoolean(!1),c=i[1].on;return r?i[0]?n.createElement(l.Button,Object.assign({ref:t,onClick:o},u),a):n.createElement(l.Button,Object.assign({ref:t,onClick:c},u,{variant:"outline"}),"Are you sure?"):n.createElement(l.Button,Object.assign({ref:t,onClick:o},u),a)})),i=function(){var e,r,i,c,d,s,f,m,p,v,C=t.useContext(u),y=C.value,b=C.defaults,E=C.setValue,x=y.isOpen,A=t.useRef(null),g=t.useState(""),O=g[0],k=g[1],B=function(){var e,t;"prompt"===y.type?null==(e=y.data)||e.onClick(null):null==(t=y.data)||t.onClick(!1),E((function(e){return o({},e,{data:void 0,isOpen:!1})})),k("")},D=function(){var e,t;"prompt"===y.type?null==(e=y.data)||e.onClick(O):null==(t=y.data)||t.onClick(!0),E((function(e){return o({},e,{data:void 0,isOpen:!1})})),k("")};return x?n.createElement(l.AlertDialog,{isOpen:x,leastDestructiveRef:A,onClose:B,isCentered:null==(e=y.data)?void 0:e.isCentered},n.createElement(l.AlertDialogOverlay,null,n.createElement(l.AlertDialogContent,null,n.createElement(l.AlertDialogHeader,null,n.createElement(l.Heading,{size:"md"},(null==(r=y.data)?void 0:r.title)||"Are you sure?")),((null==(i=y.data)?void 0:i.actionBody)||(null==(c=y.data)?void 0:c.body))&&n.createElement(l.AlertDialogBody,null,(null==(d=y.data)||null==d.actionBody?void 0:d.actionBody(B))||(null==(s=y.data)?void 0:s.body)),"prompt"===y.type&&n.createElement(l.AlertDialogBody,null,n.createElement("form",{onSubmit:function(e){e.preventDefault(),D()}},n.createElement(l.FormControl,null,n.createElement(l.Input,{ref:A,value:O,onChange:function(e){return k(e.target.value)}})))),n.createElement(l.AlertDialogFooter,null,n.createElement(l.Button,{onClick:B},b.cancel),!(null==(f=y.data)?void 0:f.onlyAlert)&&n.createElement(a,{buttonProps:{colorScheme:(null==(m=y.data)?void 0:m.buttonColor)||"blue",ml:3},ref:"prompt"===y.type?null:A,onClick:D,doubleConfirm:(null==(p=y.data)?void 0:p.doubleConfirm)||!1},(null==(v=y.data)?void 0:v.buttonText)||"Confirm"))))):null},c=function(e,n){var l=t.useContext(u);return function(t){return new Promise((function(r,u){var a;l.setValue({type:n||"confirm",isOpen:!0,data:o({},null==(a=l.defaults)?void 0:a.confirm,e,t,{onClick:r})})}))}};exports.ConfirmContextProvider=function(e){var l=e.children,a=e.defaults,c=t.useState({isOpen:!1,type:"alert"});return n.createElement(u.Provider,{value:{value:c[0],setValue:c[1],defaults:{cancel:(null==a?void 0:a.cancel)||r.cancel,confirm:o({},null==r?void 0:r.confirm,null==a?void 0:a.confirm),delete:o({},null==r?void 0:r.delete,null==a?void 0:a.delete)}}},n.createElement(i,null),l)},exports.useConfirm=c,exports.useConfirmDelete=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.delete,e))},exports.usePrompt=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt")},exports.usePromptWithClose=function(e){var n,l=t.useContext(u);return[c(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt"),l]},exports.useUNSTABLE_Alert=function(e){return c(o({onlyAlert:!0},e),"alert")};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,l=require("@chakra-ui/react");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e}).apply(this,arguments)}var r={prompt:{title:"Enter some data",buttonText:"Submit",buttonColor:"blue"},confirm:{title:"Are you sure?"},delete:{title:"Are you sure?",body:"Are you sure you want to delete this",buttonText:"Delete",buttonColor:"red"},cancel:"Cancel"},u=t.createContext({value:{type:"confirm",isOpen:!1,isLoading:!1},setValue:function(){},defaults:o({},r)}),a=t.forwardRef((function(e,t){var o=e.onClick,r=e.doubleConfirm,u=e.buttonProps,a=e.children,i=l.useBoolean(!1),c=i[1].on;return r?i[0]?n.createElement(l.Button,Object.assign({ref:t,onClick:o},u),a):n.createElement(l.Button,Object.assign({ref:t,onClick:c},u,{variant:"outline"}),"Are you sure?"):n.createElement(l.Button,Object.assign({ref:t,onClick:o},u),a)})),i=function(){var e,r,i,c,d,s,f,m,p,v,C,y=t.useContext(u),b=y.value,E=y.defaults,g=y.setValue,x=b.isOpen,A=t.useRef(null),O=t.useState(""),k=O[0],B=O[1],D=function(){var e,t;"prompt"===b.type?null==(e=b.data)||e.onClick(null):null==(t=b.data)||t.onClick(!1),g((function(e){return o({},e,{data:void 0,isOpen:!1})})),B("")},h=function(){var e,t;"prompt"===b.type?null==(e=b.data)||e.onClick(k):null==(t=b.data)||t.onClick(!0),g((function(e){return o({},e,{data:void 0,isOpen:!1})})),B("")};if(!x)return null;var P=null==(e=b.data)?void 0:e.customBody;return n.createElement(l.AlertDialog,{isOpen:x,leastDestructiveRef:A,onClose:D,isCentered:null==(r=b.data)?void 0:r.isCentered},n.createElement(l.AlertDialogOverlay,null,n.createElement(l.AlertDialogContent,null,n.createElement(l.AlertDialogHeader,null,n.createElement(l.Heading,{size:"md"},(null==(i=b.data)?void 0:i.title)||"Are you sure?")),((null==(c=b.data)?void 0:c.actionBody)||(null==(d=b.data)?void 0:d.body))&&n.createElement(l.AlertDialogBody,null,(null==(s=b.data)||null==s.actionBody?void 0:s.actionBody(D))||(null==(f=b.data)?void 0:f.body)),"prompt"===b.type&&n.createElement(l.AlertDialogBody,null,n.createElement("form",{onSubmit:function(e){e.preventDefault(),h()}},P?n.createElement(P,{setState:B}):n.createElement(l.FormControl,null,n.createElement(l.Input,{ref:A,value:k,onChange:function(e){return B(e.target.value)}})))),n.createElement(l.AlertDialogFooter,null,n.createElement(l.Button,{onClick:D},E.cancel),!(null==(m=b.data)?void 0:m.onlyAlert)&&n.createElement(a,{buttonProps:{colorScheme:(null==(p=b.data)?void 0:p.buttonColor)||"blue",ml:3},ref:"prompt"===b.type?null:A,onClick:h,doubleConfirm:(null==(v=b.data)?void 0:v.doubleConfirm)||!1},(null==(C=b.data)?void 0:C.buttonText)||"Confirm")))))},c=function(e,n){var l=t.useContext(u);return function(t){return new Promise((function(r,u){var a;l.setValue({type:n||"confirm",isOpen:!0,isLoading:!1,data:o({},null==(a=l.defaults)?void 0:a.confirm,e,t,{onClick:r})})}))}};exports.ConfirmContextProvider=function(e){var l=e.children,a=e.defaults,c=t.useState({isOpen:!1,isLoading:!1,type:"alert"});return n.createElement(u.Provider,{value:{value:c[0],setValue:c[1],defaults:{cancel:(null==a?void 0:a.cancel)||r.cancel,confirm:o({},null==r?void 0:r.confirm,null==a?void 0:a.confirm),delete:o({},null==r?void 0:r.delete,null==a?void 0:a.delete)}}},n.createElement(i,null),l)},exports.useConfirm=c,exports.useConfirmDelete=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.delete,e))},exports.usePrompt=function(e){var n,l=t.useContext(u);return c(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt")},exports.usePromptWithClose=function(e){var n,l=t.useContext(u);return[c(o({},null==(n=l.defaults)?void 0:n.prompt,e),"prompt"),l]},exports.useUNSTABLE_Alert=function(e){return c(o({onlyAlert:!0},e),"alert")};
 //# sourceMappingURL=chakra-confirm.cjs.production.min.js.map

dist/chakra-confirm.esm.js

@@ -42,3 +42,4 @@ import React, { createContext, useState, useContext, useRef, forwardRef } from 'react';
     type: 'confirm',
-    isOpen: false
+    isOpen: false,
+    isLoading: false
   },
@@ -89,3 +90,3 @@ setValue: function setValue() {},
 var GlobalConfirmModal = function GlobalConfirmModal() {
-  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14;
+  var _value$data5, _value$data6, _value$data7, _value$data8, _value$data9, _value$data10, _value$data11, _value$data12, _value$data13, _value$data14, _value$data15;
 
@@ -148,2 +149,3 @@ var _useContext = useContext(confirmContext),
 
+  var CustomForm = (_value$data5 = value.data) == null ? void 0 : _value$data5.customBody;
   return React.createElement(AlertDialog, {
@@ -153,6 +155,6 @@ isOpen: isOpen,
     onClose: onClose,
-    isCentered: (_value$data5 = value.data) == null ? void 0 : _value$data5.isCentered
+    isCentered: (_value$data6 = value.data) == null ? void 0 : _value$data6.isCentered
   }, React.createElement(AlertDialogOverlay, null, React.createElement(AlertDialogContent, null, React.createElement(AlertDialogHeader, null, React.createElement(Heading, {
     size: "md"
-  }, ((_value$data6 = value.data) == null ? void 0 : _value$data6.title) || 'Are you sure?')), (((_value$data7 = value.data) == null ? void 0 : _value$data7.actionBody) || ((_value$data8 = value.data) == null ? void 0 : _value$data8.body)) && React.createElement(AlertDialogBody, null, ((_value$data9 = value.data) == null ? void 0 : _value$data9.actionBody == null ? void 0 : _value$data9.actionBody(onClose)) || ((_value$data10 = value.data) == null ? void 0 : _value$data10.body)), value.type === 'prompt' && React.createElement(AlertDialogBody, null, React.createElement("form", {
+  }, ((_value$data7 = value.data) == null ? void 0 : _value$data7.title) || 'Are you sure?')), (((_value$data8 = value.data) == null ? void 0 : _value$data8.actionBody) || ((_value$data9 = value.data) == null ? void 0 : _value$data9.body)) && React.createElement(AlertDialogBody, null, ((_value$data10 = value.data) == null ? void 0 : _value$data10.actionBody == null ? void 0 : _value$data10.actionBody(onClose)) || ((_value$data11 = value.data) == null ? void 0 : _value$data11.body)), value.type === 'prompt' && React.createElement(AlertDialogBody, null, React.createElement("form", {
     onSubmit: function onSubmit(e) {
@@ -162,3 +164,5 @@ e.preventDefault();
     }
-  }, React.createElement(FormControl, null, React.createElement(Input, {
+  }, CustomForm ? React.createElement(CustomForm, {
+    setState: setTmp
+  }) : React.createElement(FormControl, null, React.createElement(Input, {
     ref: confirmRef,
@@ -171,5 +175,5 @@ value: tmp,
     onClick: onClose
-  }, defaults.cancel), !((_value$data11 = value.data) == null ? void 0 : _value$data11.onlyAlert) && React.createElement(SubmitButton, {
+  }, defaults.cancel), !((_value$data12 = value.data) == null ? void 0 : _value$data12.onlyAlert) && React.createElement(SubmitButton, {
     buttonProps: {
-      colorScheme: ((_value$data12 = value.data) == null ? void 0 : _value$data12.buttonColor) || 'blue',
+      colorScheme: ((_value$data13 = value.data) == null ? void 0 : _value$data13.buttonColor) || 'blue',
       ml: 3
@@ -179,4 +183,4 @@ },
     onClick: onClick,
-    doubleConfirm: ((_value$data13 = value.data) == null ? void 0 : _value$data13.doubleConfirm) || false
-  }, ((_value$data14 = value.data) == null ? void 0 : _value$data14.buttonText) || 'Confirm')))));
+    doubleConfirm: ((_value$data14 = value.data) == null ? void 0 : _value$data14.doubleConfirm) || false
+  }, ((_value$data15 = value.data) == null ? void 0 : _value$data15.buttonText) || 'Confirm')))));
 };
@@ -190,2 +194,3 @@
     isOpen: false,
+    isLoading: false,
     type: 'alert'
@@ -217,2 +222,3 @@ }),
         isOpen: true,
+        isLoading: false,
         data: _extends({}, (_context$defaults = context.defaults) == null ? void 0 : _context$defaults.confirm, init, data, {
@@ -219,0 +225,0 @@ onClick: resolve

dist/context.d.ts

@@ -14,2 +14,5 @@ import React from 'react';
     textConfirm?: string;
+    customBody?: React.FC<{
+        setState: React.Dispatch<React.SetStateAction<any>>;
+    }>;
 }
@@ -20,2 +23,3 @@ export declare type PopupType = 'prompt' | 'confirm' | 'alert';
     isOpen: boolean;
+    isLoading: boolean;
     data?: ConfirmData;
@@ -22,0 +26,0 @@ }

dist/index.d.ts

@@ -8,7 +8,7 @@ import React from 'react';
 declare type BaseData = Omit<ConfirmData, 'onClick'>;
-export declare const useConfirm: (init?: Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm"> | undefined, type?: "prompt" | "confirm" | "alert" | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => Promise<boolean>;
-export declare const useConfirmDelete: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => Promise<boolean>;
-export declare const usePrompt: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => (data?: Partial<BaseData> | undefined) => Promise<string | null>;
-export declare const usePromptWithClose: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => readonly [(data?: Partial<BaseData> | undefined) => Promise<string | null>, ConfirmContext];
-export declare const useUNSTABLE_Alert: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm">> | undefined) => Promise<boolean>;
+export declare const useConfirm: (init?: Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody"> | undefined, type?: "prompt" | "confirm" | "alert" | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => Promise<boolean>;
+export declare const useConfirmDelete: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => Promise<boolean>;
+export declare const usePrompt: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => (data?: Partial<BaseData> | undefined) => Promise<string | null>;
+export declare const usePromptWithClose: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => readonly [(data?: Partial<BaseData> | undefined) => Promise<string | null>, ConfirmContext];
+export declare const useUNSTABLE_Alert: (init?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => (data?: Partial<Pick<ConfirmData, "doubleConfirm" | "title" | "body" | "buttonText" | "buttonColor" | "label" | "actionBody" | "isCentered" | "onlyAlert" | "textConfirm" | "customBody">> | undefined) => Promise<boolean>;
 export {};

package.json

@@ -5,3 +5,3 @@ {
   "author": "Fran Zekan",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "license": "MIT",
@@ -38,4 +38,4 @@ "main": "dist/index.js",
     "husky": "^4.3.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "size-limit": "^4.6.0",
@@ -42,0 +42,0 @@ "tsdx": "^0.14.0",

No alert changes

Improved metrics

Total package byte prevSize

78946

increased by4.25%

Lines of code

798

increased by3.91%

No dependency changes