@dev-plus-plus/react-await - npm Package Compare versions

Comparing version 1.0.10 to 2.0.0

dist/AwaitConsumer.d.ts

@@ -1,8 +0,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { AwaitHandler } from './types';
-export interface AwaitConsumerProps {
-    name?: string;
-    index?: number;
-    handler?: AwaitHandler;
+import { AwaitLoader } from './types';
+declare type HTMLProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export interface AwaitConsumerProps extends HTMLProps {
+    loader: AwaitLoader;
     animationClassName?: string;
@@ -13,23 +11,7 @@ animationDuration?: number;
     onError?: () => void;
-    children?: React.ReactElement | React.ReactElement[];
-    loadingView?: React.ReactElement;
-    errorView?: React.ReactElement;
+    loadingView?: React.ReactNode;
+    errorView?: React.ReactNode;
+    keepDimensions?: boolean;
 }
-declare type HTMLProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare function AwaitConsumer(props: AwaitConsumerProps & HTMLProps): JSX.Element;
-export declare namespace AwaitConsumer {
-    var propTypes: {
-        name: PropTypes.Requireable<string>;
-        index: PropTypes.Requireable<number>;
-        handler: PropTypes.Requireable<object>;
-        animationClassName: PropTypes.Requireable<string>;
-        animationDuration: PropTypes.Requireable<number>;
-        onLoadingStart: PropTypes.Requireable<(...args: any[]) => any>;
-        onLoadingEnd: PropTypes.Requireable<(...args: any[]) => any>;
-        onError: PropTypes.Requireable<(...args: any[]) => any>;
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
-        loadingView: PropTypes.Requireable<PropTypes.ReactElementLike>;
-        errorView: PropTypes.Requireable<PropTypes.ReactElementLike>;
-    };
-}
+export declare const AwaitConsumer: React.FC<AwaitConsumerProps>;
 export {};

dist/AwaitContext.d.ts

 import React from 'react';
-import { AwaitContextState } from './types';
-export declare const AwaitContext: React.Context<AwaitContextState>;
+import { AwaitContextProps } from './types';
+export declare const AwaitContext: React.Context<AwaitContextProps>;

dist/AwaitProvider.d.ts

 import React from 'react';
-import PropTypes from 'prop-types';
 import { AwaitContextOptions } from './types';
-export interface AwaitProviderProps {
-    children?: React.ReactElement | React.ReactElement[];
-}
-export declare function AwaitProvider(props: AwaitProviderProps & AwaitContextOptions): JSX.Element;
-export declare namespace AwaitProvider {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactElementLike | PropTypes.ReactElementLike[]>;
-        defaultLoadingView: PropTypes.Requireable<PropTypes.ReactElementLike>;
-    };
-    var defaultProps: {
-        children: undefined;
-        defaultLoadingView: undefined;
-    };
-}
+export declare type AwaitProviderProps = AwaitContextOptions;
+export declare const AwaitProvider: React.FC<AwaitProviderProps>;

dist/index.d.ts

@@ -7,2 +7,3 @@ export * from './useAwait';
 export * from './AwaitProvider';
+export * from './AwaitLoaderContainer';
 export * from './types';

dist/index.js

 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var React = _interopDefault(require('react'));
 var reactTransitionGroup = require('react-transition-group');
@@ -60,3 +58,3 @@
 
-var AwaitContext = React__default.createContext({
+var AwaitContext = React.createContext({
   record: {},
@@ -72,105 +70,48 @@ setRecord: function setRecord() {}
 
-function useAwait(name, index) {
-  var run = function run(func, delay) {
-    try {
-      return Promise.resolve(_catch(function () {
-        function _temp2() {
-          return Promise.resolve(func()).then(function (result) {
-            done();
-            return result;
-          });
-        }
+var _excluded = ["record", "setRecord"];
+function useAwaitContext() {
+  var _React$useContext = React.useContext(AwaitContext),
+      record = _React$useContext.record,
+      setRecord = _React$useContext.setRecord,
+      rest = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
 
-        init();
-
-        var _temp = function () {
-          if (delay) return Promise.resolve(new Promise(function (resolve) {
-            return setTimeout(resolve, delay);
-          })).then(function () {});
-        }();
-
-        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-      }, function (e) {
-        error();
-        throw e;
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var context = React.useContext(AwaitContext);
-
-  var _useState = React.useState(),
-      state = _useState[0],
-      setState = _useState[1];
-
-  var getFullName = function getFullName() {
+  var getFullName = React.useCallback(function (name, index) {
     return "" + name + (index !== undefined ? "__" + index : '');
-  };
-
-  React.useEffect(function () {
-    setState(context.record[getFullName()]);
-  }, [context.record[getFullName()]]);
-
-  var isStateUndefined = function isStateUndefined() {
-    return state === undefined;
-  };
-
-  var isStateStandby = function isStateStandby() {
-    return state === exports.AwaitState.STANDBY;
-  };
-
-  var isStateLoading = function isStateLoading() {
-    return state === exports.AwaitState.LOADING;
-  };
-
-  var isStateError = function isStateError() {
-    return state === exports.AwaitState.ERROR;
-  };
-
-  var setRecord = function setRecord(state) {
-    context.setRecord(function (data) {
+  }, []);
+  var getState = React.useCallback(function (name, index) {
+    return record[getFullName(name, index)];
+  }, [getFullName, record]);
+  var setState = React.useCallback(function (state, name, index) {
+    setRecord(function (data) {
       var _extends2;
 
-      return _extends({}, data, (_extends2 = {}, _extends2[getFullName()] = state, _extends2));
+      return _extends({}, data, (_extends2 = {}, _extends2[getFullName(name, index)] = state, _extends2));
     });
-  };
-
-  var init = function init() {
-    setState(exports.AwaitState.LOADING);
-    setRecord(exports.AwaitState.LOADING);
-  };
-
-  var done = function done() {
-    return setRecord(exports.AwaitState.STANDBY);
-  };
-
-  var error = function error() {
-    return setRecord(exports.AwaitState.ERROR);
-  };
-
-  return React.useMemo(function () {
-    return {
-      state: state,
-      stateRecord: context.record,
-      getFullName: getFullName,
-      isStateUndefined: isStateUndefined,
-      isStateStandby: isStateStandby,
-      isStateLoading: isStateLoading,
-      isStateError: isStateError,
-      init: init,
-      done: done,
-      error: error,
-      run: run
-    };
-  }, [state, context.record]);
-}
-
-function useAwaitContext() {
-  var run = function run(name, func, delay, index) {
+  }, [getFullName, setRecord]);
+  var isUnset = React.useCallback(function (name, index) {
+    return getState(name, index) === undefined;
+  }, [getState]);
+  var isStandby = React.useCallback(function (name, index) {
+    return getState(name, index) === exports.AwaitState.STANDBY;
+  }, [getState]);
+  var isLoading = React.useCallback(function (name, index) {
+    return getState(name, index) === exports.AwaitState.LOADING;
+  }, [getState]);
+  var isError = React.useCallback(function (name, index) {
+    return getState(name, index) === exports.AwaitState.ERROR;
+  }, [getState]);
+  var init = React.useCallback(function (name, index) {
+    setState(exports.AwaitState.LOADING, name, index);
+  }, [setState]);
+  var done = React.useCallback(function (name, index) {
+    setState(exports.AwaitState.STANDBY, name, index);
+  }, [setState]);
+  var error = React.useCallback(function (name, index) {
+    setState(exports.AwaitState.ERROR, name, index);
+  }, [setState]);
+  var run = React.useCallback(function (name, callback, delay, index) {
     try {
       return Promise.resolve(_catch(function () {
         function _temp2() {
-          return Promise.resolve(func()).then(function (result) {
+          return Promise.resolve(callback()).then(function (result) {
             done(name, index);
@@ -184,5 +125,7 @@ return result;
         var _temp = function () {
-          if (delay) return Promise.resolve(new Promise(function (resolve) {
-            return setTimeout(resolve, delay);
-          })).then(function () {});
+          if (delay) {
+            return Promise.resolve(new Promise(function (resolve) {
+              return setTimeout(resolve, delay);
+            })).then(function () {});
+          }
         }();
@@ -198,58 +141,82 @@
     }
-  };
+  }, [done, error, init]);
+  return _extends({
+    getFullName: getFullName,
+    getState: getState,
+    setState: setState,
+    isUnset: isUnset,
+    isStandby: isStandby,
+    isLoading: isLoading,
+    isError: isError,
+    init: init,
+    done: done,
+    error: error,
+    run: run,
+    record: record,
+    setRecord: setRecord
+  }, rest);
+}
 
-  var context = React.useContext(AwaitContext);
+var _excluded$1 = ["getFullName", "getState", "setState", "isUnset", "isStandby", "isLoading", "isError", "init", "done", "error", "run"];
+function useAwait(name, index) {
+  var _useAwaitContext = useAwaitContext(),
+      getFullName = _useAwaitContext.getFullName,
+      getStateFromRecord = _useAwaitContext.getState,
+      setStateFromRecord = _useAwaitContext.setState,
+      isUnsetFromRecord = _useAwaitContext.isUnset,
+      isStandbyFromRecord = _useAwaitContext.isStandby,
+      isLoadingFromRecord = _useAwaitContext.isLoading,
+      isErrorFromRecord = _useAwaitContext.isError,
+      initFromRecord = _useAwaitContext.init,
+      doneFromRecord = _useAwaitContext.done,
+      errorFromRecord = _useAwaitContext.error,
+      runFromRecord = _useAwaitContext.run,
+      rest = _objectWithoutPropertiesLoose(_useAwaitContext, _excluded$1);
 
-  var getState = function getState(name, index) {
-    return context.record[getFullName(name, index)];
-  };
-
-  var getFullName = function getFullName(name, index) {
-    return "" + name + (index !== undefined ? "__" + index : '');
-  };
-
-  var isStateUndefined = function isStateUndefined(name, index) {
-    return getState(name, index) === undefined;
-  };
-
-  var isStateStandby = function isStateStandby(name, index) {
-    return getState(name, index) === exports.AwaitState.STANDBY;
-  };
-
-  var isStateLoading = function isStateLoading(name, index) {
-    return getState(name, index) === exports.AwaitState.LOADING;
-  };
-
-  var isStateError = function isStateError(name, index) {
-    return getState(name, index) === exports.AwaitState.ERROR;
-  };
-
-  var setRecord = function setRecord(state, name, index) {
-    return context.setRecord(function (data) {
-      var _extends2;
-
-      return _extends({}, data, (_extends2 = {}, _extends2[getFullName(name, index)] = state, _extends2));
-    });
-  };
-
-  var init = function init(name, index) {
-    return setRecord(exports.AwaitState.LOADING, name, index);
-  };
-
-  var done = function done(name, index) {
-    return setRecord(exports.AwaitState.STANDBY, name, index);
-  };
-
-  var error = function error(name, index) {
-    return setRecord(exports.AwaitState.ERROR, name, index);
-  };
-
-  return React.useMemo(function () {
+  var fullName = React.useMemo(function () {
+    return getFullName(name, index);
+  }, [getFullName, name, index]);
+  var state = React.useMemo(function () {
+    return getStateFromRecord(name, index);
+  }, [getStateFromRecord, name, index]);
+  var setState = React.useCallback(function (state) {
+    return setStateFromRecord(state, name, index);
+  }, [setStateFromRecord, name, index]);
+  var isUnset = React.useMemo(function () {
+    return isUnsetFromRecord(name, index);
+  }, [isUnsetFromRecord, name, index]);
+  var isStandby = React.useMemo(function () {
+    return isStandbyFromRecord(name, index);
+  }, [isStandbyFromRecord, name, index]);
+  var isLoading = React.useMemo(function () {
+    return isLoadingFromRecord(name, index);
+  }, [isLoadingFromRecord, name, index]);
+  var isError = React.useMemo(function () {
+    return isErrorFromRecord(name, index);
+  }, [isErrorFromRecord, name, index]);
+  var init = React.useCallback(function () {
+    return initFromRecord(name, index);
+  }, [initFromRecord, name, index]);
+  var done = React.useCallback(function () {
+    return doneFromRecord(name, index);
+  }, [doneFromRecord, name, index]);
+  var error = React.useCallback(function () {
+    return errorFromRecord(name, index);
+  }, [errorFromRecord, name, index]);
+  var run = React.useCallback(function (callback, delay) {
+    return runFromRecord(name, callback, delay, index);
+  }, [runFromRecord, name, index]);
+  var loader = React.useMemo(function () {
     return {
-      stateRecord: context.record,
-      getFullName: getFullName,
-      isStateUndefined: isStateUndefined,
-      isStateStandby: isStateStandby,
-      isStateLoading: isStateLoading,
-      isStateError: isStateError,
+      fullName: fullName,
+      state: state,
+      setState: setState,
+      isUnset: isUnset,
+      isStandby: isStandby,
+      isLoading: isLoading,
+      isError: isError
+    };
+  }, [fullName, state, setState, isUnset, isStandby, isLoading, isError]);
+  var controller = React.useMemo(function () {
+    return {
       init: init,
@@ -260,3 +227,7 @@ done: done,
     };
-  }, [context.record]);
+  }, [init, done, error, run]);
+  return _extends({
+    loader: loader,
+    controller: controller
+  }, rest);
 }
@@ -274,12 +245,12 @@
       immediate = _props$immediate === void 0 ? true : _props$immediate,
-      awaitHandler = _props.awaitHandler,
+      controller = _props.controller,
       delay = _props.delay;
 
-  var _useState = React.useState(initialData),
-      data = _useState[0],
-      setData = _useState[1];
+  var _React$useState = React.useState(initialData),
+      data = _React$useState[0],
+      setData = _React$useState[1];
 
-  var _useState2 = React.useState(null),
-      error = _useState2[0],
-      setError = _useState2[1];
+  var _React$useState2 = React.useState(null),
+      error = _React$useState2[0],
+      setError = _React$useState2[1];
 
@@ -301,6 +272,6 @@ var mountedRef = React.useRef(true);
     if (immediate) {
-      if (awaitHandler) {
-        awaitHandler.run(fetch, delay);
+      if (controller) {
+        controller.run(fetch, delay).then();
       } else {
-        fetch();
+        fetch().then();
       }
@@ -320,9 +291,36 @@ }
 
-var _excluded = ["name", "index", "handler", "animationClassName", "animationDuration", "onLoadingStart", "onLoadingEnd", "onError", "children", "loadingView", "errorView"];
+var AwaitLoaderContainer = function AwaitLoaderContainer(props) {
+  var children = props.children,
+      fallback = props.fallback,
+      useContainer = props.useContainer,
+      minWidth = props.minWidth,
+      minHeight = props.minHeight;
+  var value = React.useMemo(function () {
+    var _ref;
+
+    return (_ref = children != null ? children : fallback) != null ? _ref : React.createElement("div", null, "Loading...");
+  }, [children, fallback]);
+
+  if (useContainer) {
+    return React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: minHeight,
+        minWidth: minWidth
+      }
+    }, value);
+  }
+
+  return React.createElement(React.Fragment, {
+    children: value
+  });
+};
+
+var _excluded$2 = ["loader", "animationClassName", "animationDuration", "onLoadingStart", "onLoadingEnd", "onError", "children", "loadingView", "errorView", "keepDimensions"];
 var defaultAnimationClassName = 'fade-blur';
 var defaultAnimationDuration = 400;
-function AwaitConsumer(props) {
-  var name = props.name,
-      index = props.index,
-      handler = props.handler,
+var AwaitConsumer = function AwaitConsumer(props) {
+  var loader = props.loader,
       animationClassName = props.animationClassName,
@@ -336,17 +334,18 @@ animationDuration = props.animationDuration,
       errorView = props.errorView,
-      htmlProps = _objectWithoutPropertiesLoose(props, _excluded);
+      _props$keepDimensions = props.keepDimensions,
+      keepDimensions = _props$keepDimensions === void 0 ? true : _props$keepDimensions,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  var controller = handler ? handler : name ? useAwait(name, index) : undefined;
   var ref = React.useRef(null);
 
-  var _useState = React.useState(),
-      minHeight = _useState[0],
-      setMinHeight = _useState[1];
+  var _React$useState = React.useState(),
+      minHeight = _React$useState[0],
+      setMinHeight = _React$useState[1];
 
-  var _useState2 = React.useState(),
-      minWidth = _useState2[0],
-      setMinWidth = _useState2[1];
+  var _React$useState2 = React.useState(),
+      minWidth = _React$useState2[0],
+      setMinWidth = _React$useState2[1];
 
   React.useEffect(function () {
-    switch (controller === null || controller === void 0 ? void 0 : controller.state) {
+    switch (loader.state) {
       case exports.AwaitState.LOADING:
@@ -369,10 +368,10 @@ onLoadingStart === null || onLoadingStart === void 0 ? void 0 : onLoadingStart();
     }
-  }, [controller === null || controller === void 0 ? void 0 : controller.state]);
-  return React__default.createElement(AwaitContext.Consumer, null, function (state) {
-    var _controller$state, _ref, _ref2, _ref3, _ref4, _ref5;
+  }, [loader.state, onError, onLoadingEnd, onLoadingStart]);
+  return React.createElement(AwaitContext.Consumer, null, function (state) {
+    var _loader$state, _ref, _ref2;
 
-    return React__default.createElement(reactTransitionGroup.SwitchTransition, {
+    return React.createElement(reactTransitionGroup.SwitchTransition, {
       mode: 'out-in'
-    }, React__default.createElement(reactTransitionGroup.CSSTransition, {
-      key: (_controller$state = controller === null || controller === void 0 ? void 0 : controller.state) != null ? _controller$state : exports.AwaitState.STANDBY,
+    }, React.createElement(reactTransitionGroup.CSSTransition, {
+      key: (_loader$state = loader.state) != null ? _loader$state : exports.AwaitState.STANDBY,
       classNames: (_ref = animationClassName != null ? animationClassName : state.defaultAnimationClassName) != null ? _ref : defaultAnimationClassName,
@@ -382,39 +381,24 @@ timeout: (_ref2 = animationDuration != null ? animationDuration : state.defaultAnimationDuration) != null ? _ref2 : defaultAnimationDuration,
       appear: true
-    }, React__default.createElement("div", Object.assign({
+    }, React.createElement("div", Object.assign({
       ref: ref
-    }, htmlProps), (controller === null || controller === void 0 ? void 0 : controller.isStateLoading()) && React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: minHeight,
-        minWidth: minWidth
-      }
-    }, (_ref3 = loadingView != null ? loadingView : state.defaultLoadingView) != null ? _ref3 : React__default.createElement("div", null, "Loading...")), (controller === null || controller === void 0 ? void 0 : controller.isStateError()) && ((_ref4 = errorView != null ? errorView : children) != null ? _ref4 : React__default.createElement("div", null)), (_ref5 = ((controller === null || controller === void 0 ? void 0 : controller.isStateStandby()) || (controller === null || controller === void 0 ? void 0 : controller.isStateUndefined())) && children) != null ? _ref5 : React__default.createElement("div", null))));
+    }, rest), loader.isLoading && React.createElement(AwaitLoaderContainer, {
+      children: loadingView,
+      fallback: state.defaultLoadingView,
+      useContainer: keepDimensions,
+      minWidth: minWidth,
+      minHeight: minHeight
+    }), loader.isError && (errorView != null ? errorView : children), (loader.isStandby || loader.isUnset) && children)));
   });
-}
-AwaitConsumer.propTypes = {
-  name: PropTypes.string,
-  index: PropTypes.number,
-  handler: PropTypes.object,
-  animationClassName: PropTypes.string,
-  animationDuration: PropTypes.number,
-  onLoadingStart: PropTypes.func,
-  onLoadingEnd: PropTypes.func,
-  onError: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element.isRequired)]),
-  loadingView: PropTypes.element,
-  errorView: PropTypes.element
 };
 
-var _excluded$1 = ["children"];
-function AwaitProvider(props) {
+var _excluded$3 = ["children"];
+var AwaitProvider = function AwaitProvider(props) {
   var children = props.children,
-      options = _objectWithoutPropertiesLoose(props, _excluded$1);
+      options = _objectWithoutPropertiesLoose(props, _excluded$3);
 
-  var _useState = React.useState({}),
-      record = _useState[0],
-      setRecord = _useState[1];
+  var _React$useState = React.useState({}),
+      record = _React$useState[0],
+      setRecord = _React$useState[1];
 
-  var initialContextState = _extends({
+  var context = _extends({
     record: record,
@@ -424,17 +408,11 @@ setRecord: setRecord
 
-  return React__default.createElement(AwaitContext.Provider, {
-    value: initialContextState
-  }, children);
-}
-AwaitProvider.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element.isRequired)]),
-  defaultLoadingView: PropTypes.element
+  return React.createElement(AwaitContext.Provider, {
+    value: context,
+    children: children
+  });
 };
-AwaitProvider.defaultProps = {
-  children: undefined,
-  defaultLoadingView: undefined
-};
 
 exports.AwaitConsumer = AwaitConsumer;
 exports.AwaitContext = AwaitContext;
+exports.AwaitLoaderContainer = AwaitLoaderContainer;
 exports.AwaitProvider = AwaitProvider;
@@ -441,0 +419,0 @@ exports.useAsync = useAsync;

dist/index.modern.js

@@ -1,3 +0,2 @@
-import React, { useContext, useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import { SwitchTransition, CSSTransition } from 'react-transition-group';
@@ -70,105 +69,48 @@
 
-function useAwait(name, index) {
-  var run = function run(func, delay) {
-    try {
-      return Promise.resolve(_catch(function () {
-        function _temp2() {
-          return Promise.resolve(func()).then(function (result) {
-            done();
-            return result;
-          });
-        }
+var _excluded = ["record", "setRecord"];
+function useAwaitContext() {
+  var _React$useContext = React.useContext(AwaitContext),
+      record = _React$useContext.record,
+      setRecord = _React$useContext.setRecord,
+      rest = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
 
-        init();
-
-        var _temp = function () {
-          if (delay) return Promise.resolve(new Promise(function (resolve) {
-            return setTimeout(resolve, delay);
-          })).then(function () {});
-        }();
-
-        return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-      }, function (e) {
-        error();
-        throw e;
-      }));
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
-
-  var context = useContext(AwaitContext);
-
-  var _useState = useState(),
-      state = _useState[0],
-      setState = _useState[1];
-
-  var getFullName = function getFullName() {
+  var getFullName = React.useCallback(function (name, index) {
     return "" + name + (index !== undefined ? "__" + index : '');
-  };
-
-  useEffect(function () {
-    setState(context.record[getFullName()]);
-  }, [context.record[getFullName()]]);
-
-  var isStateUndefined = function isStateUndefined() {
-    return state === undefined;
-  };
-
-  var isStateStandby = function isStateStandby() {
-    return state === AwaitState.STANDBY;
-  };
-
-  var isStateLoading = function isStateLoading() {
-    return state === AwaitState.LOADING;
-  };
-
-  var isStateError = function isStateError() {
-    return state === AwaitState.ERROR;
-  };
-
-  var setRecord = function setRecord(state) {
-    context.setRecord(function (data) {
+  }, []);
+  var getState = React.useCallback(function (name, index) {
+    return record[getFullName(name, index)];
+  }, [getFullName, record]);
+  var setState = React.useCallback(function (state, name, index) {
+    setRecord(function (data) {
       var _extends2;
 
-      return _extends({}, data, (_extends2 = {}, _extends2[getFullName()] = state, _extends2));
+      return _extends({}, data, (_extends2 = {}, _extends2[getFullName(name, index)] = state, _extends2));
     });
-  };
-
-  var init = function init() {
-    setState(AwaitState.LOADING);
-    setRecord(AwaitState.LOADING);
-  };
-
-  var done = function done() {
-    return setRecord(AwaitState.STANDBY);
-  };
-
-  var error = function error() {
-    return setRecord(AwaitState.ERROR);
-  };
-
-  return useMemo(function () {
-    return {
-      state: state,
-      stateRecord: context.record,
-      getFullName: getFullName,
-      isStateUndefined: isStateUndefined,
-      isStateStandby: isStateStandby,
-      isStateLoading: isStateLoading,
-      isStateError: isStateError,
-      init: init,
-      done: done,
-      error: error,
-      run: run
-    };
-  }, [state, context.record]);
-}
-
-function useAwaitContext() {
-  var run = function run(name, func, delay, index) {
+  }, [getFullName, setRecord]);
+  var isUnset = React.useCallback(function (name, index) {
+    return getState(name, index) === undefined;
+  }, [getState]);
+  var isStandby = React.useCallback(function (name, index) {
+    return getState(name, index) === AwaitState.STANDBY;
+  }, [getState]);
+  var isLoading = React.useCallback(function (name, index) {
+    return getState(name, index) === AwaitState.LOADING;
+  }, [getState]);
+  var isError = React.useCallback(function (name, index) {
+    return getState(name, index) === AwaitState.ERROR;
+  }, [getState]);
+  var init = React.useCallback(function (name, index) {
+    setState(AwaitState.LOADING, name, index);
+  }, [setState]);
+  var done = React.useCallback(function (name, index) {
+    setState(AwaitState.STANDBY, name, index);
+  }, [setState]);
+  var error = React.useCallback(function (name, index) {
+    setState(AwaitState.ERROR, name, index);
+  }, [setState]);
+  var run = React.useCallback(function (name, callback, delay, index) {
     try {
       return Promise.resolve(_catch(function () {
         function _temp2() {
-          return Promise.resolve(func()).then(function (result) {
+          return Promise.resolve(callback()).then(function (result) {
             done(name, index);
@@ -182,5 +124,7 @@ return result;
         var _temp = function () {
-          if (delay) return Promise.resolve(new Promise(function (resolve) {
-            return setTimeout(resolve, delay);
-          })).then(function () {});
+          if (delay) {
+            return Promise.resolve(new Promise(function (resolve) {
+              return setTimeout(resolve, delay);
+            })).then(function () {});
+          }
         }();
@@ -196,58 +140,82 @@
     }
-  };
+  }, [done, error, init]);
+  return _extends({
+    getFullName: getFullName,
+    getState: getState,
+    setState: setState,
+    isUnset: isUnset,
+    isStandby: isStandby,
+    isLoading: isLoading,
+    isError: isError,
+    init: init,
+    done: done,
+    error: error,
+    run: run,
+    record: record,
+    setRecord: setRecord
+  }, rest);
+}
 
-  var context = useContext(AwaitContext);
+var _excluded$1 = ["getFullName", "getState", "setState", "isUnset", "isStandby", "isLoading", "isError", "init", "done", "error", "run"];
+function useAwait(name, index) {
+  var _useAwaitContext = useAwaitContext(),
+      getFullName = _useAwaitContext.getFullName,
+      getStateFromRecord = _useAwaitContext.getState,
+      setStateFromRecord = _useAwaitContext.setState,
+      isUnsetFromRecord = _useAwaitContext.isUnset,
+      isStandbyFromRecord = _useAwaitContext.isStandby,
+      isLoadingFromRecord = _useAwaitContext.isLoading,
+      isErrorFromRecord = _useAwaitContext.isError,
+      initFromRecord = _useAwaitContext.init,
+      doneFromRecord = _useAwaitContext.done,
+      errorFromRecord = _useAwaitContext.error,
+      runFromRecord = _useAwaitContext.run,
+      rest = _objectWithoutPropertiesLoose(_useAwaitContext, _excluded$1);
 
-  var getState = function getState(name, index) {
-    return context.record[getFullName(name, index)];
-  };
-
-  var getFullName = function getFullName(name, index) {
-    return "" + name + (index !== undefined ? "__" + index : '');
-  };
-
-  var isStateUndefined = function isStateUndefined(name, index) {
-    return getState(name, index) === undefined;
-  };
-
-  var isStateStandby = function isStateStandby(name, index) {
-    return getState(name, index) === AwaitState.STANDBY;
-  };
-
-  var isStateLoading = function isStateLoading(name, index) {
-    return getState(name, index) === AwaitState.LOADING;
-  };
-
-  var isStateError = function isStateError(name, index) {
-    return getState(name, index) === AwaitState.ERROR;
-  };
-
-  var setRecord = function setRecord(state, name, index) {
-    return context.setRecord(function (data) {
-      var _extends2;
-
-      return _extends({}, data, (_extends2 = {}, _extends2[getFullName(name, index)] = state, _extends2));
-    });
-  };
-
-  var init = function init(name, index) {
-    return setRecord(AwaitState.LOADING, name, index);
-  };
-
-  var done = function done(name, index) {
-    return setRecord(AwaitState.STANDBY, name, index);
-  };
-
-  var error = function error(name, index) {
-    return setRecord(AwaitState.ERROR, name, index);
-  };
-
-  return useMemo(function () {
+  var fullName = React.useMemo(function () {
+    return getFullName(name, index);
+  }, [getFullName, name, index]);
+  var state = React.useMemo(function () {
+    return getStateFromRecord(name, index);
+  }, [getStateFromRecord, name, index]);
+  var setState = React.useCallback(function (state) {
+    return setStateFromRecord(state, name, index);
+  }, [setStateFromRecord, name, index]);
+  var isUnset = React.useMemo(function () {
+    return isUnsetFromRecord(name, index);
+  }, [isUnsetFromRecord, name, index]);
+  var isStandby = React.useMemo(function () {
+    return isStandbyFromRecord(name, index);
+  }, [isStandbyFromRecord, name, index]);
+  var isLoading = React.useMemo(function () {
+    return isLoadingFromRecord(name, index);
+  }, [isLoadingFromRecord, name, index]);
+  var isError = React.useMemo(function () {
+    return isErrorFromRecord(name, index);
+  }, [isErrorFromRecord, name, index]);
+  var init = React.useCallback(function () {
+    return initFromRecord(name, index);
+  }, [initFromRecord, name, index]);
+  var done = React.useCallback(function () {
+    return doneFromRecord(name, index);
+  }, [doneFromRecord, name, index]);
+  var error = React.useCallback(function () {
+    return errorFromRecord(name, index);
+  }, [errorFromRecord, name, index]);
+  var run = React.useCallback(function (callback, delay) {
+    return runFromRecord(name, callback, delay, index);
+  }, [runFromRecord, name, index]);
+  var loader = React.useMemo(function () {
     return {
-      stateRecord: context.record,
-      getFullName: getFullName,
-      isStateUndefined: isStateUndefined,
-      isStateStandby: isStateStandby,
-      isStateLoading: isStateLoading,
-      isStateError: isStateError,
+      fullName: fullName,
+      state: state,
+      setState: setState,
+      isUnset: isUnset,
+      isStandby: isStandby,
+      isLoading: isLoading,
+      isError: isError
+    };
+  }, [fullName, state, setState, isUnset, isStandby, isLoading, isError]);
+  var controller = React.useMemo(function () {
+    return {
       init: init,
@@ -258,3 +226,7 @@ done: done,
     };
-  }, [context.record]);
+  }, [init, done, error, run]);
+  return _extends({
+    loader: loader,
+    controller: controller
+  }, rest);
 }
@@ -272,15 +244,15 @@
       immediate = _props$immediate === void 0 ? true : _props$immediate,
-      awaitHandler = _props.awaitHandler,
+      controller = _props.controller,
       delay = _props.delay;
 
-  var _useState = useState(initialData),
-      data = _useState[0],
-      setData = _useState[1];
+  var _React$useState = React.useState(initialData),
+      data = _React$useState[0],
+      setData = _React$useState[1];
 
-  var _useState2 = useState(null),
-      error = _useState2[0],
-      setError = _useState2[1];
+  var _React$useState2 = React.useState(null),
+      error = _React$useState2[0],
+      setError = _React$useState2[1];
 
-  var mountedRef = useRef(true);
-  var fetch = useCallback(function () {
+  var mountedRef = React.useRef(true);
+  var fetch = React.useCallback(function () {
     return asyncFunc(params).then(function (response) {
@@ -297,8 +269,8 @@ if (!mountedRef.current) return null;
   }, [asyncFunc, params]);
-  useEffect(function () {
+  React.useEffect(function () {
     if (immediate) {
-      if (awaitHandler) {
-        awaitHandler.run(fetch, delay);
+      if (controller) {
+        controller.run(fetch, delay).then();
       } else {
-        fetch();
+        fetch().then();
       }
@@ -318,9 +290,36 @@ }
 
-var _excluded = ["name", "index", "handler", "animationClassName", "animationDuration", "onLoadingStart", "onLoadingEnd", "onError", "children", "loadingView", "errorView"];
+var AwaitLoaderContainer = function AwaitLoaderContainer(props) {
+  var children = props.children,
+      fallback = props.fallback,
+      useContainer = props.useContainer,
+      minWidth = props.minWidth,
+      minHeight = props.minHeight;
+  var value = React.useMemo(function () {
+    var _ref;
+
+    return (_ref = children != null ? children : fallback) != null ? _ref : React.createElement("div", null, "Loading...");
+  }, [children, fallback]);
+
+  if (useContainer) {
+    return React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: minHeight,
+        minWidth: minWidth
+      }
+    }, value);
+  }
+
+  return React.createElement(React.Fragment, {
+    children: value
+  });
+};
+
+var _excluded$2 = ["loader", "animationClassName", "animationDuration", "onLoadingStart", "onLoadingEnd", "onError", "children", "loadingView", "errorView", "keepDimensions"];
 var defaultAnimationClassName = 'fade-blur';
 var defaultAnimationDuration = 400;
-function AwaitConsumer(props) {
-  var name = props.name,
-      index = props.index,
-      handler = props.handler,
+var AwaitConsumer = function AwaitConsumer(props) {
+  var loader = props.loader,
       animationClassName = props.animationClassName,
@@ -334,17 +333,18 @@ animationDuration = props.animationDuration,
       errorView = props.errorView,
-      htmlProps = _objectWithoutPropertiesLoose(props, _excluded);
+      _props$keepDimensions = props.keepDimensions,
+      keepDimensions = _props$keepDimensions === void 0 ? true : _props$keepDimensions,
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
-  var controller = handler ? handler : name ? useAwait(name, index) : undefined;
-  var ref = useRef(null);
+  var ref = React.useRef(null);
 
-  var _useState = useState(),
-      minHeight = _useState[0],
-      setMinHeight = _useState[1];
+  var _React$useState = React.useState(),
+      minHeight = _React$useState[0],
+      setMinHeight = _React$useState[1];
 
-  var _useState2 = useState(),
-      minWidth = _useState2[0],
-      setMinWidth = _useState2[1];
+  var _React$useState2 = React.useState(),
+      minWidth = _React$useState2[0],
+      setMinWidth = _React$useState2[1];
 
-  useEffect(function () {
-    switch (controller === null || controller === void 0 ? void 0 : controller.state) {
+  React.useEffect(function () {
+    switch (loader.state) {
       case AwaitState.LOADING:
@@ -367,5 +367,5 @@ onLoadingStart === null || onLoadingStart === void 0 ? void 0 : onLoadingStart();
     }
-  }, [controller === null || controller === void 0 ? void 0 : controller.state]);
+  }, [loader.state, onError, onLoadingEnd, onLoadingStart]);
   return React.createElement(AwaitContext.Consumer, null, function (state) {
-    var _controller$state, _ref, _ref2, _ref3, _ref4, _ref5;
+    var _loader$state, _ref, _ref2;
 
@@ -375,3 +375,3 @@ return React.createElement(SwitchTransition, {
     }, React.createElement(CSSTransition, {
-      key: (_controller$state = controller === null || controller === void 0 ? void 0 : controller.state) != null ? _controller$state : AwaitState.STANDBY,
+      key: (_loader$state = loader.state) != null ? _loader$state : AwaitState.STANDBY,
       classNames: (_ref = animationClassName != null ? animationClassName : state.defaultAnimationClassName) != null ? _ref : defaultAnimationClassName,
@@ -383,37 +383,22 @@ timeout: (_ref2 = animationDuration != null ? animationDuration : state.defaultAnimationDuration) != null ? _ref2 : defaultAnimationDuration,
       ref: ref
-    }, htmlProps), (controller === null || controller === void 0 ? void 0 : controller.isStateLoading()) && React.createElement("div", {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: minHeight,
-        minWidth: minWidth
-      }
-    }, (_ref3 = loadingView != null ? loadingView : state.defaultLoadingView) != null ? _ref3 : React.createElement("div", null, "Loading...")), (controller === null || controller === void 0 ? void 0 : controller.isStateError()) && ((_ref4 = errorView != null ? errorView : children) != null ? _ref4 : React.createElement("div", null)), (_ref5 = ((controller === null || controller === void 0 ? void 0 : controller.isStateStandby()) || (controller === null || controller === void 0 ? void 0 : controller.isStateUndefined())) && children) != null ? _ref5 : React.createElement("div", null))));
+    }, rest), loader.isLoading && React.createElement(AwaitLoaderContainer, {
+      children: loadingView,
+      fallback: state.defaultLoadingView,
+      useContainer: keepDimensions,
+      minWidth: minWidth,
+      minHeight: minHeight
+    }), loader.isError && (errorView != null ? errorView : children), (loader.isStandby || loader.isUnset) && children)));
   });
-}
-AwaitConsumer.propTypes = {
-  name: PropTypes.string,
-  index: PropTypes.number,
-  handler: PropTypes.object,
-  animationClassName: PropTypes.string,
-  animationDuration: PropTypes.number,
-  onLoadingStart: PropTypes.func,
-  onLoadingEnd: PropTypes.func,
-  onError: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element.isRequired)]),
-  loadingView: PropTypes.element,
-  errorView: PropTypes.element
 };
 
-var _excluded$1 = ["children"];
-function AwaitProvider(props) {
+var _excluded$3 = ["children"];
+var AwaitProvider = function AwaitProvider(props) {
   var children = props.children,
-      options = _objectWithoutPropertiesLoose(props, _excluded$1);
+      options = _objectWithoutPropertiesLoose(props, _excluded$3);
 
-  var _useState = useState({}),
-      record = _useState[0],
-      setRecord = _useState[1];
+  var _React$useState = React.useState({}),
+      record = _React$useState[0],
+      setRecord = _React$useState[1];
 
-  var initialContextState = _extends({
+  var context = _extends({
     record: record,
@@ -424,15 +409,8 @@ setRecord: setRecord
   return React.createElement(AwaitContext.Provider, {
-    value: initialContextState
-  }, children);
-}
-AwaitProvider.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element.isRequired)]),
-  defaultLoadingView: PropTypes.element
+    value: context,
+    children: children
+  });
 };
-AwaitProvider.defaultProps = {
-  children: undefined,
-  defaultLoadingView: undefined
-};
 
-export { AwaitConsumer, AwaitContext, AwaitProvider, AwaitState, useAsync, useAwait, useAwaitContext };
+export { AwaitConsumer, AwaitContext, AwaitLoaderContainer, AwaitProvider, AwaitState, useAsync, useAwait, useAwaitContext };
 //# sourceMappingURL=index.modern.js.map

dist/types.d.ts

@@ -18,4 +18,19 @@ import React from 'react';
 }
-export declare type AwaitContextState = AwaitContextData & AwaitContextOptions;
-export declare type AwaitHandler = ReturnType<typeof useAwait>;
-export declare type AwaitHandlerContext = ReturnType<typeof useAwaitContext>;
+export declare type AwaitContextProps = AwaitContextData & AwaitContextOptions;
+export declare type AwaitLoader = {
+    fullName: string;
+    state: AwaitState;
+    setState: (state: AwaitState) => void;
+    isUnset: boolean;
+    isStandby: boolean;
+    isLoading: boolean;
+    isError: boolean;
+};
+export declare type AwaitController = {
+    init: () => void;
+    done: () => void;
+    error: () => void;
+    run: <T>(cb: () => Promise<T>, delay?: number) => Promise<T>;
+};
+export declare type UseAwaitReturn = ReturnType<typeof useAwait>;
+export declare type UseAwaitContextReturn = ReturnType<typeof useAwaitContext>;

dist/useAsync.d.ts

@@ -1,2 +0,2 @@
-import type { AwaitHandler } from './types';
+import { AwaitController } from './types';
 export interface UseAsyncProps<T, I extends T | undefined, P> {
@@ -6,3 +6,3 @@ initialData?: I;
     immediate?: boolean;
-    awaitHandler?: AwaitHandler;
+    controller?: AwaitController;
     delay?: number;
@@ -9,0 +9,0 @@ }

dist/useAwait.d.ts

@@ -1,14 +0,11 @@
-import { AwaitState } from './types';
+import React from 'react';
+import { AwaitController, AwaitLoader, AwaitState } from './types';
 export declare function useAwait(name: string, index?: number): {
-    state: AwaitState | undefined;
-    stateRecord: Record<string, AwaitState>;
-    getFullName: () => string;
-    isStateUndefined: () => boolean;
-    isStateStandby: () => boolean;
-    isStateLoading: () => boolean;
-    isStateError: () => boolean;
-    init: () => void;
-    done: () => void;
-    error: () => void;
-    run: <T>(func: (...args: any[]) => Promise<T>, delay?: number | undefined) => Promise<T>;
+    defaultLoadingView?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    defaultAnimationClassName?: string | undefined;
+    defaultAnimationDuration?: number | undefined;
+    record: Record<string, AwaitState>;
+    setRecord: React.Dispatch<React.SetStateAction<Record<string, AwaitState>>>;
+    loader: AwaitLoader;
+    controller: AwaitController;
 };

dist/useAwaitContext.d.ts

@@ -0,13 +1,20 @@
+import React from 'react';
 import { AwaitState } from './types';
 export declare function useAwaitContext(): {
-    stateRecord: Record<string, AwaitState>;
+    defaultLoadingView?: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    defaultAnimationClassName?: string | undefined;
+    defaultAnimationDuration?: number | undefined;
     getFullName: (name: string, index?: number | undefined) => string;
-    isStateUndefined: (name: string, index?: number | undefined) => boolean;
-    isStateStandby: (name: string, index?: number | undefined) => boolean;
-    isStateLoading: (name: string, index?: number | undefined) => boolean;
-    isStateError: (name: string, index?: number | undefined) => boolean;
+    getState: (name: string, index?: number | undefined) => AwaitState;
+    setState: (state: AwaitState, name: string, index?: number | undefined) => void;
+    isUnset: (name: string, index?: number | undefined) => boolean;
+    isStandby: (name: string, index?: number | undefined) => boolean;
+    isLoading: (name: string, index?: number | undefined) => boolean;
+    isError: (name: string, index?: number | undefined) => boolean;
     init: (name: string, index?: number | undefined) => void;
     done: (name: string, index?: number | undefined) => void;
     error: (name: string, index?: number | undefined) => void;
-    run: <T>(name: string, func: (...args: any[]) => Promise<T>, delay?: number | undefined, index?: number | undefined) => Promise<T>;
+    run: <T>(name: string, callback: () => Promise<T>, delay?: number | undefined, index?: number | undefined) => Promise<T>;
+    record: Record<string, AwaitState>;
+    setRecord: React.Dispatch<React.SetStateAction<Record<string, AwaitState>>>;
 };

package.json

 {
   "name": "@dev-plus-plus/react-await",
-  "version": "1.0.10",
+  "version": "2.0.0",
   "private": false,
@@ -30,3 +30,2 @@ "author": "ftgibran",
   "peerDependencies": {
-    "prop-types": "^15.x",
     "react": "^17.x",
@@ -63,2 +62,3 @@ "react-dom": "^17.x",
     "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "jest": "^27.0.6",
@@ -65,0 +65,0 @@ "microbundle-crl": "^0.13.11",

README.md

@@ -19,3 +19,3 @@ # React Await
 ```shell
-npm i @dev-plus-plus/react-await react react-dom react-transition-group prop-types
+npm i @dev-plus-plus/react-await react react-dom react-transition-group
 ```
@@ -59,3 +59,3 @@
 function AnyOtherComponent() {
-  const fakeAwait = useAwait('fake') // set the name of consumer
+  const {loader, controller} = useAwait('fake') // set the name of consumer
 
@@ -72,4 +72,4 @@ const runFakeSuccess = async () => {
     <div>
-      <button onClick={() => fakeAwait.run(runFakeSuccess)}>Fake Success</button>
-      <button onClick={() => fakeAwait.run(runFakeError)}>Fake Error</button>
+      <button onClick={() => controller.run(runFakeSuccess)}>Fake Success</button>
+      <button onClick={() => controller.run(runFakeError)}>Fake Error</button>
     </div>
@@ -80,6 +80,6 @@ )
     <>
-      State: {fakeAwait.state}
+      State: {loader.state}
 
       <AwaitConsumer
-        name={'fake'} // required
+        loader={loader} // required
         animationClassName={'fade'} // default fade-blur
@@ -149,3 +149,7 @@ animationDuration={400} // default 400
 
-### The state property
+### record prop
+Returns a dictionary of all states registered.
+The key is the name of the consumer and the value is the current state.
+
+### laoder.state prop
 Returns the current state of loader represented by enum.
@@ -155,7 +159,3 @@ The available states are: `LOADING`, `STANDBY`, `ERROR`.
 
-### The stateRecord property
-Returns a dictionary of all states registered.
-The key is the name of the consumer and the value is the current state.
-
-### getFullName method
+### loader.fullName prop
 Returns the full name of consumer.
@@ -165,15 +165,15 @@ Normally, the full name is the real name.
 
-### isStateUndefined method
+### loader.isUnset prop
 Returns true if the state is undefined
 
-### isStateStandby method
+### loader.isStandby prop
 Returns true if the state is Standby
 
-### isStateLoading method
+### loader.isLoading prop
 Returns true if the state is Loading
 
-### isStateError method
+### loader.isError prop
 Returns true if the state is Error
 
-### init method
+### controller.init method
 Starts to load.
@@ -184,6 +184,6 @@
 // ...
-const testAwait = useAwait('test')
+const {controller} = useAwait('test')
 
 useEffect(() => {
-  testAwait.init() // start to load when the component mounts
+  controller.init() // start to load when the component mounts
 }, [])
@@ -193,3 +193,3 @@ // ...
 
-### done method
+### controller.done method
 Finish the loading.
@@ -200,3 +200,3 @@
 // ...
-const testAwait = useAwait('test')
+const {controller} = useAwait('test')
 
@@ -208,5 +208,5 @@ useEffect(() => {
 async function run() {
-  testAwait.init()
+  controller.init()
   await new Promise((resolve) => setTimeout(resolve, 1000))
-  testAwait.done() // end to load after 1 second
+  controller.done() // end to load after 1 second
 }
@@ -216,3 +216,3 @@ // ...
 
-### error method
+### controller.error method
 Finish the loading with error.
@@ -223,3 +223,3 @@
 // ...
-const testAwait = useAwait('test')
+const {controller} = useAwait('test')
 
@@ -231,5 +231,5 @@ useEffect(() => {
 async function run() {
-  testAwait.init()
+  controller.init()
   await new Promise((resolve) => setTimeout(resolve, 1000))
-  testAwait.error() // end to load with after 1 second
+  controller.error() // end to load with after 1 second
 }
@@ -239,3 +239,3 @@ // ...
 
-### run method
+### loader.run method
 Starts to load, then finish the loading with success or error state.
@@ -246,8 +246,8 @@
 // ...
-const testAwait = useAwait('test')
+const {controller} = useAwait('test')
 
 useEffect(() => {
-  testAwait.run(() => Promise.resolve(), delay = 1000)
+  controller.run(() => Promise.resolve(), delay = 1000)
 }, [])
 // ...
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137771

increased by3.93%

Dependency count

3

decreased by-25%

Number of package files

16

increased by6.67%

Worsened metrics

Dev dependency count

38

increased by2.7%

Lines of code

960

decreased by-0.41%

No dependency changes