react-transition-state 1.0.1 → 1.1.3

package/README.md

@@ -1,22 +1,31 @@
 # React-Transition-State
 
 [![NPM](https://img.shields.io/npm/v/react-transition-state.svg)](https://www.npmjs.com/package/react-transition-state)
+[![NPM](https://img.shields.io/npm/dm/react-transition-state)](https://www.npmjs.com/package/react-transition-state)
+[![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)
 [![Known Vulnerabilities](https://snyk.io/test/github/szhsin/react-transition-state/badge.svg)](https://snyk.io/test/github/szhsin/react-transition-state)
 
 ## Why?
 
-This library was inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group). It allows you to easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner:
+Inspired by the [React Transition Group](https://github.com/reactjs/react-transition-group), this tiny library helps you easily perform animations/transitions of your React component in a [fully controlled](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#common-bugs-when-using-derived-state) manner, using a Hook API.
 
 - 🍭 Working with both CSS animation and transition.
 - 🔄 Moving React components in and out of DOM seamlessly.
 - 🚫 Using no [derived state](https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html).
 - 🚀 Efficient: each state transition results in at most one extract render for your component.
-- 🤏 Tiny: ideal for both component libraries and applications.
+- 🤏 Tiny: [~0.7KB](https://bundlephobia.com/package/react-transition-state) and no dependencies, ideal for both component libraries and applications.
 
 🤔 Not convinced? [See a comparison with _React Transition Group_](#comparisons-with-react-transition-group)
 
 <br/>
 
+## State diagram
+
+![state-diagram](https://user-images.githubusercontent.com/41896553/142855447-cb8d8730-f8fb-4296-a3db-d1523b0fa2d9.png)
+The `initialEntered` and `mountOnEnter` props are omitted from the diagram to keep it less convoluted. [Please read more details at the API section](#usetransition-hook).
+
+<br/>
+
 ## Install
 
 ```bash
@@ -31,6 +40,8 @@ yarn add react-transition-state
 
 ## Usage
 
+### CSS example
+
 ```jsx
 import { useTransition } from 'react-transition-state';
 /* or import useTransition from 'react-transition-state'; */
@@ -68,7 +79,7 @@ export default Example;
 
 <br/>
 
-## styled-components example
+### styled-components example
 
 ```jsx
 import React from 'react';
@@ -100,7 +111,6 @@ function StyledExample() {
       {showButton && <button onClick={() => toggle(true)}>Show Message</button>}
       {!showButton && (
         <Box state={state}>
-          <h1>state: {state}</h1>
           <p>This message is being transitioned in and out of the DOM.</p>
           <button onClick={() => toggle(false)}>Close</button>
         </Box>
@@ -116,14 +126,22 @@ export default StyledExample;
 
 <br/>
 
+### tailwindcss example
+
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-transition-tailwindcss-21nys)**
+
+<br/>
+
 ## Comparisons with _React Transition Group_
 
 |                                  | React Transition Group                                                                                                                                                                              | This library                                                                                                                                                                                                                                          |
 | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Use derived state                | _Yes_ – using an `in` prop to trigger changes in a separate transition state                                                                                                                        | _No_ – there is only a single state which is triggered by a toggle function                                                                                                                                                                           |
+| Use derived state                | _Yes_ – use an `in` prop to trigger changes in a derived transition state                                                                                                                           | _No_ – there is only a single state which is triggered by a toggle function                                                                                                                                                                           |
 | Controlled                       | _No_ – <br/>Transition state is managed internally.<br/>Resort to callback events to read the internal state.                                                                                       | _Yes_ – <br/>Transition state is _lifted_ up into the consuming component.<br/>You have direct access to the transition state.                                                                                                                        |
 | DOM updates                      | _Imperative_ – [commit changes into DOM imperatively](https://github.com/reactjs/react-transition-group/blob/5aa3fd2d7e3354a7e42505d55af605ff44f74e2e/src/CSSTransition.js#L10) to update `classes` | _Declarative_ – you declare [what the `classes` look like](https://github.com/szhsin/react-transition-state/blob/2ab44c12ac5d5283ec3bb997bfc1d5ef6dffb0ce/example/src/components/BasicExample.js#L31) and DOM updates are taken care of by `ReactDOM` |
 | Working with _styled-components_ | Your code looks like – <br/>`&.box-exit-active { opacity: 0; }`<br/>`&.box-enter-active { opacity: 1; }`                                                                                            | Your code looks like – <br/>`opacity: ${({ state }) => (state === 'exiting' ? '0' : '1')};` <br/> It's the way how you normally use the _styled-components_                                                                                           |
+| Bundle size                      | [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-group)](https://bundlephobia.com/package/react-transition-group)                                                                | ✅ [![NPM](https://img.shields.io/bundlephobia/minzip/react-transition-state)](https://bundlephobia.com/package/react-transition-state)                                                                                                               |
+| Dependency count                 | [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-group)](https://www.npmjs.com/package/react-transition-group?activeTab=dependencies)                                      | ✅ [![NPM](https://badgen.net/bundlephobia/dependency-count/react-transition-state)](https://www.npmjs.com/package/react-transition-state?activeTab=dependencies)                                                                                     |
 
 This [CodeSandbox example](https://codesandbox.io/s/react-transition-state-vs-group-p45iy) demonstrates how the same transition can be implemented in a more simplified, declarative, and controllable manner than _React Transition Group_.
 
@@ -141,16 +159,17 @@ function useTransition(
 
 #### Options
 
-| Name             | Type                                               | Default | Description                                                                                                           |
-| ---------------- | -------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
-| `enter`          | boolean                                            | true    | Enable or disable enter phase transitions                                                                             |
-| `exit`           | boolean                                            | true    | Enable or disable exit phase transitions                                                                              |
-| `preEnter`       | boolean                                            |         | Add a 'preEnter' state immediately before 'entering'                                                                  |
-| `preExit`        | boolean                                            |         | Add a 'preExit' state immediately before 'exiting'                                                                    |
-| `initialEntered` | boolean                                            |         | Beginning from 'entered' state                                                                                        |
-| `mountOnEnter`   | boolean                                            |         | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component. |
-| `unmountOnExit`  | boolean                                            |         | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.             |
-| `timeout`        | number \| <br />{ enter?: number; exit?: number; } |         | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions. |
+| Name             | Type                                               | Default | Description                                                                                                                                                                                                                                                                                                                                           |
+| ---------------- | -------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enter`          | boolean                                            | true    | Enable or disable enter phase transitions                                                                                                                                                                                                                                                                                                             |
+| `exit`           | boolean                                            | true    | Enable or disable exit phase transitions                                                                                                                                                                                                                                                                                                              |
+| `preEnter`       | boolean                                            |         | Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or `display: none` with CSS transition (not necessary for CSS animation).                                                                                                                                                              |
+| `preExit`        | boolean                                            |         | Add a 'preExit' state immediately before 'exiting'                                                                                                                                                                                                                                                                                                    |
+| `initialEntered` | boolean                                            |         | Beginning from 'entered' state                                                                                                                                                                                                                                                                                                                        |
+| `mountOnEnter`   | boolean                                            |         | State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component.                                                                                                                                                                                                                                 |
+| `unmountOnExit`  | boolean                                            |         | State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.                                                                                                                                                                                                                                             |
+| `timeout`        | number \| <br />{ enter?: number; exit?: number; } |         | Set timeout in **ms** for transitions; you can set a single value or different values for enter and exit transitions.                                                                                                                                                                                                                                 |
+| `onChange`       | (event: { state: string }) => void                 |         | Event fired when state has changed. <br/><br/>Prefer to read state from the hook function return value directly unless you want to perform some side effects in response to state changes. <br/><br/>_Note: create an event handler with `useCallback` if you need to keep `toggle` or `endTransition` function's identity stable across re-renders._ |
 
 #### Return value
 
@@ -166,7 +185,7 @@ The `useTransition` Hook returns an array of values in the following order:
 
 - Call this function to stop transition which will turn state into 'entered' or 'exited'.
 - You will normally call this function in the `onAnimationEnd` or `onTransitionEnd` event.
-- You _must_ either call this function explicitly in your code or set a timeout value in Hook options.
+- You need to either call this function explicitly in your code or set a timeout value in Hook options.
 
 <br/>
 

package/dist/index.d.ts

@@ -16,8 +16,11 @@ export interface TransitionOptions {
   enter?: boolean;
   exit?: boolean;
   timeout?: number | { enter?: number; exit?: number };
+  onChange?: (event: { state: TransitionState }) => void;
 }
 
-export function useTransition(
+export const useTransition: (
   options?: TransitionOptions
-): [TransitionState, (toEnter?: boolean) => void, () => void];
+) => [TransitionState, (toEnter?: boolean) => void, () => void];
+
+export default useTransition;

package/dist/index.es.js

@@ -1,37 +1,49 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 
-const PRE_ENTER = 0;
-const ENTERING = 1;
-const ENTERED = 2;
-const PRE_EXIT = 3;
-const EXITING = 4;
-const EXITED = 5;
-const UNMOUNTED = 6;
-const STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
-
-const startOrEnd = (unmounted) => (unmounted ? UNMOUNTED : EXITED);
-
-const updateState = (newState, setState, latestState, timeoutId) => {
+var PRE_ENTER = 0;
+var ENTERING = 1;
+var ENTERED = 2;
+var PRE_EXIT = 3;
+var EXITING = 4;
+var EXITED = 5;
+var UNMOUNTED = 6;
+var STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
+
+var startOrEnd = function startOrEnd(unmounted) {
+  return unmounted ? UNMOUNTED : EXITED;
+};
+
+var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
   clearTimeout(timeoutId.current);
-  setState(newState);
-  latestState.current = newState;
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    state: STATES[state]
+  });
 };
 
-const useTransition = ({
-  initialEntered,
-  mountOnEnter,
-  unmountOnExit,
-  timeout,
-  preEnter,
-  preExit,
-  enter = true,
-  exit = true
-} = {}) => {
-  const [state, setState] = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter));
-  const latestState = useRef(state);
-  const timeoutId = useRef();
-
-  let enterTimeout, exitTimeout;
+var useTransition = function useTransition(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      _ref$enter = _ref.enter,
+      enter = _ref$enter === void 0 ? true : _ref$enter,
+      _ref$exit = _ref.exit,
+      exit = _ref$exit === void 0 ? true : _ref$exit,
+      preEnter = _ref.preEnter,
+      preExit = _ref.preExit,
+      timeout = _ref.timeout,
+      initialEntered = _ref.initialEntered,
+      mountOnEnter = _ref.mountOnEnter,
+      unmountOnExit = _ref.unmountOnExit,
+      onChange = _ref.onChange;
+
+  var _useState = useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var latestState = useRef(state);
+  var timeoutId = useRef();
+  var enterTimeout, exitTimeout;
+
   if (typeof timeout === 'object') {
     enterTimeout = timeout.enter;
     exitTimeout = timeout.exit;
@@ -39,64 +51,65 @@ const useTransition = ({
     enterTimeout = exitTimeout = timeout;
   }
 
-  const endTransition = useCallback(() => {
-    let newState;
+  var endTransition = useCallback(function () {
+    var newState;
+
     switch (latestState.current) {
-      case PRE_ENTER:
       case ENTERING:
+      case PRE_ENTER:
         newState = ENTERED;
         break;
-      case PRE_EXIT:
+
       case EXITING:
+      case PRE_EXIT:
         newState = startOrEnd(unmountOnExit);
         break;
     }
 
-    if (newState) {
-      updateState(newState, setState, latestState, timeoutId);
+    if (newState !== undefined) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
     }
-  }, [unmountOnExit]);
-
-  const transitState = useCallback(
-    (newState) => {
-      updateState(newState, setState, latestState, timeoutId);
+  }, [onChange, unmountOnExit]);
+  var toggle = useCallback(function (toEnter) {
+    var transitState = function transitState(newState) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
 
       switch (newState) {
-        case PRE_ENTER:
-        case PRE_EXIT:
-          timeoutId.current = setTimeout(() => transitState(newState + 1), 0);
-          break;
         case ENTERING:
           if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
           break;
+
         case EXITING:
           if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
           break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          timeoutId.current = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
       }
-    },
-    [enterTimeout, exitTimeout, endTransition]
-  );
-
-  const toggle = useCallback(
-    (toEnter) => {
-      const enterStage = latestState.current <= ENTERED;
-      if (typeof toEnter !== 'boolean') toEnter = !enterStage;
-
-      if (toEnter) {
-        if (!enterStage) {
-          transitState(enter ? (preEnter ? PRE_ENTER : ENTERING) : ENTERED);
-        }
-      } else {
-        if (enterStage) {
-          transitState(exit ? (preExit ? PRE_EXIT : EXITING) : startOrEnd(unmountOnExit));
-        }
-      }
-    },
-    [enter, exit, preEnter, preExit, unmountOnExit, transitState]
-  );
+    };
 
-  useEffect(() => () => clearTimeout(timeoutId.current), []);
+    var enterStage = latestState.current <= ENTERED;
+    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
+    if (toEnter) {
+      if (!enterStage) {
+        transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
+      }
+    } else {
+      if (enterStage) {
+        transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
+      }
+    }
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
+  useEffect(function () {
+    return function () {
+      return clearTimeout(timeoutId.current);
+    };
+  }, []);
   return [STATES[state], toggle, endTransition];
 };
 

package/dist/index.js

@@ -4,81 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-
-  var _s, _e;
-
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
-  return arr2;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
 var PRE_ENTER = 0;
 var ENTERING = 1;
 var ENTERED = 2;
@@ -92,35 +17,38 @@ var startOrEnd = function startOrEnd(unmounted) {
   return unmounted ? UNMOUNTED : EXITED;
 };
 
-var updateState = function updateState(newState, setState, latestState, timeoutId) {
+var updateState = function updateState(state, setState, latestState, timeoutId, onChange) {
   clearTimeout(timeoutId.current);
-  setState(newState);
-  latestState.current = newState;
+  setState(state);
+  latestState.current = state;
+  onChange && onChange({
+    state: STATES[state]
+  });
 };
 
-var useTransition = function useTransition() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      initialEntered = _ref.initialEntered,
-      mountOnEnter = _ref.mountOnEnter,
-      unmountOnExit = _ref.unmountOnExit,
-      timeout = _ref.timeout,
-      preEnter = _ref.preEnter,
-      preExit = _ref.preExit,
+var useTransition = function useTransition(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
       _ref$enter = _ref.enter,
       enter = _ref$enter === void 0 ? true : _ref$enter,
       _ref$exit = _ref.exit,
-      exit = _ref$exit === void 0 ? true : _ref$exit;
+      exit = _ref$exit === void 0 ? true : _ref$exit,
+      preEnter = _ref.preEnter,
+      preExit = _ref.preExit,
+      timeout = _ref.timeout,
+      initialEntered = _ref.initialEntered,
+      mountOnEnter = _ref.mountOnEnter,
+      unmountOnExit = _ref.unmountOnExit,
+      onChange = _ref.onChange;
 
   var _useState = react.useState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
+      state = _useState[0],
+      setState = _useState[1];
 
   var latestState = react.useRef(state);
   var timeoutId = react.useRef();
   var enterTimeout, exitTimeout;
 
-  if (_typeof(timeout) === 'object') {
+  if (typeof timeout === 'object') {
     enterTimeout = timeout.enter;
     exitTimeout = timeout.exit;
   } else {
@@ -131,42 +59,43 @@ var useTransition = function useTransition() {
     var newState;
 
     switch (latestState.current) {
-      case PRE_ENTER:
       case ENTERING:
+      case PRE_ENTER:
         newState = ENTERED;
         break;
 
-      case PRE_EXIT:
       case EXITING:
+      case PRE_EXIT:
         newState = startOrEnd(unmountOnExit);
         break;
     }
 
-    if (newState) {
-      updateState(newState, setState, latestState, timeoutId);
-    }
-  }, [unmountOnExit]);
-  var transitState = react.useCallback(function (newState) {
-    updateState(newState, setState, latestState, timeoutId);
-
-    switch (newState) {
-      case PRE_ENTER:
-      case PRE_EXIT:
-        timeoutId.current = setTimeout(function () {
-          return transitState(newState + 1);
-        }, 0);
-        break;
-
-      case ENTERING:
-        if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
-        break;
-
-      case EXITING:
-        if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
-        break;
+    if (newState !== undefined) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
     }
-  }, [enterTimeout, exitTimeout, endTransition]);
+  }, [onChange, unmountOnExit]);
   var toggle = react.useCallback(function (toEnter) {
+    var transitState = function transitState(newState) {
+      updateState(newState, setState, latestState, timeoutId, onChange);
+
+      switch (newState) {
+        case ENTERING:
+          if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
+          break;
+
+        case EXITING:
+          if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
+          break;
+
+        case PRE_ENTER:
+        case PRE_EXIT:
+          timeoutId.current = setTimeout(function () {
+            return transitState(newState + 1);
+          }, 0);
+          break;
+      }
+    };
+
     var enterStage = latestState.current <= ENTERED;
     if (typeof toEnter !== 'boolean') toEnter = !enterStage;
 
@@ -179,7 +108,7 @@ var useTransition = function useTransition() {
         transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
       }
     }
-  }, [enter, exit, preEnter, preExit, unmountOnExit, transitState]);
+  }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
   react.useEffect(function () {
     return function () {
       return clearTimeout(timeoutId.current);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-transition-state",
-  "version": "1.0.1",
-  "description": "Perform animation and transition of React component with ease.",
+  "version": "1.1.3",
+  "description": "Zero dependency, 0.7KB react-transition-group alternative.",
   "author": "Zheng Song",
   "license": "MIT",
   "repository": "szhsin/react-transition-state",
@@ -9,6 +9,7 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -20,13 +21,14 @@
     "hook"
   ],
   "scripts": {
-    "start": "rollup --config --watch",
+    "start": "rollup -c -w",
     "clean": "rm -Rf dist",
-    "bundle": "rollup --config",
+    "bundle": "rollup -c",
     "test": "jest",
     "eg": "npm start --prefix example",
     "dtslint": "dtslint --localTs node_modules/typescript/lib types",
     "types": "npm run dtslint && cp -f types/index.d.ts dist/",
+    "tsc": "cd types && tsc",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "pret": "prettier --write .",
@@ -37,22 +39,24 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.15.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
     "@rollup/plugin-babel": "^5.3.0",
     "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.0.3",
+    "babel-plugin-pure-annotations": "^0.1.2",
     "dtslint": "^4.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jest": "^24.4.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.1.0",
+    "eslint-plugin-jest": "^25.2.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "jest": "^27.3.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
-    "rollup": "^2.56.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.4.2"
+    "rollup": "^2.60.0",
+    "typescript": "^4.5.2"
   }
 }

package/dist/index.min.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var r=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==r)return;var n,o,u=[],i=!0,c=!1;try{for(r=r.call(t);!(i=(n=r.next()).done)&&(u.push(n.value),!e||u.length!==e);i=!0);}catch(t){c=!0,o=t}finally{try{i||null==r.return||r.return()}finally{if(c)throw o}}return u}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}var o=["preEnter","entering","entered","preExit","exiting","exited","unmounted"],u=function(t){return t?6:5},i=function(t,e,r,n){clearTimeout(n.current),e(t),r.current=t},c=function(){var n,c,a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},l=a.initialEntered,f=a.mountOnEnter,s=a.unmountOnExit,y=a.timeout,m=a.preEnter,b=a.preExit,p=a.enter,d=void 0===p||p,v=a.exit,h=void 0===v||v,x=t.useState(l?2:u(f)),S=r(x,2),g=S[0],E=S[1],T=t.useRef(g),k=t.useRef();"object"===e(y)?(n=y.enter,c=y.exit):n=c=y;var w=t.useCallback((function(){var t;switch(T.current){case 0:case 1:t=2;break;case 3:case 4:t=u(s)}t&&i(t,E,T,k)}),[s]),A=t.useCallback((function(t){switch(i(t,E,T,k),t){case 0:case 3:k.current=setTimeout((function(){return A(t+1)}),0);break;case 1:n>=0&&(k.current=setTimeout(w,n));break;case 4:c>=0&&(k.current=setTimeout(w,c))}}),[n,c,w]),j=t.useCallback((function(t){var e=T.current<=2;"boolean"!=typeof t&&(t=!e),t?e||A(d?m?0:1:2):e&&A(h?b?3:4:u(s))}),[d,h,m,b,s,A]);return t.useEffect((function(){return function(){return clearTimeout(k.current)}}),[]),[o[g],j,w]};exports.default=c,exports.useTransition=c;