Add default export (#17)

szhsin · Aug 28, 2021 · fd3d9d6 · fd3d9d6
1 parent dfbd5e3
commit fd3d9d6
Show file tree

Hide file tree

Showing 9 changed files with 971 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ This library was inspired by the [React Transition Group](https://github.com/rea
 - 🔄 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 in size: ideal for both component libraries and applications.
+- 🤏 Tiny: ideal for both component libraries and applications.
 
 ## Install
 
@@ -26,6 +26,7 @@ yarn add react-transition-state
 
 ```jsx
 import { useTransition } from 'react-transition-state';
+/* or import useTransition from 'react-transition-state'; */
 
 function Example() {
   const [state, toggle] = useTransition({ timeout: 750, preEnter: true });

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1,5 +1,11 @@
-export type TransitionState = 'preEnter' | 'entering' | 'entered'
-  | 'preExit' | 'exiting' | 'exited' | 'unmounted';
+export type TransitionState =
+  | 'preEnter'
+  | 'entering'
+  | 'entered'
+  | 'preExit'
+  | 'exiting'
+  | 'exited'
+  | 'unmounted';
 
 export interface TransitionOptions {
   initialEntered?: boolean;
@@ -9,11 +15,9 @@ export interface TransitionOptions {
   preExit?: boolean;
   enter?: boolean;
   exit?: boolean;
-  timeout?: number | { enter?: number; exit?: number; };
+  timeout?: number | { enter?: number; exit?: number };
 }
 
-export function useTransition(options?: TransitionOptions): [
-  TransitionState,
-  (toEnter?: boolean) => void,
-  () => void
-];
+export function useTransition(
+  options?: TransitionOptions
+): [TransitionState, (toEnter?: boolean) => void, () => void];
diff --git a/dist/index.es.js b/dist/index.es.js
@@ -9,7 +9,7 @@ const EXITED = 5;
 const UNMOUNTED = 6;
 const STATES = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
 
-const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
+const startOrEnd = (unmounted) => (unmounted ? UNMOUNTED : EXITED);
 
 const updateState = (newState, setState, latestState, timeoutId) => {
   clearTimeout(timeoutId.current);
@@ -57,41 +57,47 @@ const useTransition = ({
     }
   }, [unmountOnExit]);
 
-  const transitState = useCallback(newState => {
-    updateState(newState, setState, latestState, timeoutId);
+  const transitState = useCallback(
+    (newState) => {
+      updateState(newState, setState, latestState, timeoutId);
 
-    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;
-    }
-  }, [enterTimeout, exitTimeout, endTransition]);
+      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;
+      }
+    },
+    [enterTimeout, exitTimeout, endTransition]
+  );
 
-  const toggle = useCallback(toEnter => {
-    const enterStage = latestState.current <= ENTERED;
-    if (typeof toEnter !== 'boolean') toEnter = !enterStage;
+  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));
+      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]);
+    },
+    [enter, exit, preEnter, preExit, unmountOnExit, transitState]
+  );
 
   useEffect(() => () => clearTimeout(timeoutId.current), []);
 
   return [STATES[state], toggle, endTransition];
 };
 
-export { useTransition };
+export { useTransition as default, useTransition };
diff --git a/dist/index.js b/dist/index.js
@@ -188,4 +188,5 @@ var useTransition = function useTransition() {
   return [STATES[state], toggle, endTransition];
 };
 
+exports['default'] = useTransition;
 exports.useTransition = useTransition;
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/example/src/components/BasicExample.js b/example/src/components/BasicExample.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useTransition } from 'react-transition-state';
+import useTransition from 'react-transition-state';
 
 function BasicExample() {
   const [unmountOnExit, setUnmountOnExit] = useState(false);