Switch Transition Component

/**
 * A transition component inspired by Vue transition modes.
 * Controls the render timing between state transitions.
 * Makes consistent transitions between components based on the child's key.
 */
declare class SwitchTransition extends Component<SwitchTransitionProps> {}

interface SwitchTransitionProps {
  /** 
   * Transition modes controlling timing:
   * - "out-in": Current element exits first, then new element enters
   * - "in-out": New element enters first, then current element exits
   */
  mode?: "out-in" | "in-out";
  
  /** Single Transition or CSSTransition component */
  children: ReactElement;
}

enum modes {
  /** Current element transitions out first, then new element transitions in */
  out = "out-in",
  
  /** New element transitions in first, then current element transitions out */
  in = "in-out"
}

import React, { useState, useRef } from "react";
import { SwitchTransition, CSSTransition } from "react-transition-group";

// Basic switch transition
const SwitchExample: React.FC = () => {
  const [state, setState] = useState(false);

  return (
    <SwitchTransition>
      <CSSTransition
        key={state ? "goodbye" : "hello"}
        timeout={300}
        classNames="fade"
      >
        <button onClick={() => setState(!state)}>
          {state ? "Goodbye, world!" : "Hello, world!"}
        </button>
      </CSSTransition>
    </SwitchTransition>
  );
};

// With custom mode
const InOutExample: React.FC = () => {
  const [page, setPage] = useState("home");

  return (
    <div>
      <nav>
        <button onClick={() => setPage("home")}>Home</button>
        <button onClick={() => setPage("about")}>About</button>
        <button onClick={() => setPage("contact")}>Contact</button>
      </nav>
      
      <SwitchTransition mode="in-out">
        <CSSTransition
          key={page}
          timeout={500}
          classNames="slide"
        >
          <div className="page">
            {page === "home" && <HomePage />}
            {page === "about" && <AboutPage />}
            {page === "contact" && <ContactPage />}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
};

// With nodeRef and custom end listener
const AdvancedSwitchExample: React.FC = () => {
  const [current, setCurrent] = useState(0);
  const items = ["First", "Second", "Third"];
  const nodeRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <button onClick={() => setCurrent((current + 1) % items.length)}>
        Next
      </button>
      
      <SwitchTransition mode="out-in">
        <CSSTransition
          key={current}
          nodeRef={nodeRef}
          timeout={400}
          classNames="switch"
          addEndListener={(done) => {
            nodeRef.current?.addEventListener("transitionend", done, false);
          }}
        >
          <div ref={nodeRef} className="switch-item">
            {items[current]}
          </div>
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
};