feat: almost finished useTransition and Transition

.vscode/settings.json

@@ -8,5 +8,6 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
-  }
-}
+  },
+  "editor.formatOnSave": true
+}

src/Transition.tsx

@@ -0,0 +1,13 @@
+import {Stage, useTransition} from './useTransition';
+
+type TransitionProps = {
+  state: boolean;
+  timeout: number;
+  children: (stage: Stage, shouldMount: boolean) => React.ReactNode;
+};
+
+export function Transition({state, timeout, children}: TransitionProps) {
+  const {stage, shouldMount} = useTransition(state, timeout);
+
+  return children(stage, shouldMount);
+}

src/index.ts

@@ -1,2 +1,2 @@
-console.log('init project for npm package register');
-export {};
+export {useTransition} from './useTransition';
+export {Transition} from './Transition';

src/useTransition.ts

@@ -0,0 +1,39 @@
+import {useEffect, useRef, useState} from 'react';
+
+export type Stage = 'from' | 'enter' | 'leave';
+
+export function useTransition(state: boolean, timeout: number) {
+  // the stage of transition - 'from' | 'enter' | 'leave'
+  const [stage, setStage] = useState<Stage>(state ? 'enter' : 'from');
+
+  // the timer for should mount
+  const timer = useRef<number>();
+  const [shouldMount, setShouldMount] = useState(state);
+
+  useEffect(
+    function handleStateChange() {
+      clearTimeout(timer.current);
+
+      // when true - trans from to enter
+      // when false - trans enter to leave, unmount after timeout
+      if (state === true) {
+        setStage('from');
+        setShouldMount(true);
+        setTimeout(() => {
+          setStage('enter');
+        });
+      } else {
+        setStage('leave');
+        timer.current = setTimeout(() => {
+          setShouldMount(false);
+        }, timeout);
+      }
+    },
+    [state, timeout]
+  );
+
+  return {
+    stage,
+    shouldMount,
+  };
+}