Seamless DOM Component Transitioning;

Here achieved seamless transitioning between multiple components when only one component exists in the DOM.

The <CSSAnimationTransitionWrapper /> component is a React component used to facilitate seamless transitioning between components, ensuring a smooth and engaging user experience. In scenarios where a series of steps is involved, but not all steps are visible to the user simultaneously, each step is revealed progressively, with subsequent steps becoming visible only after completing the previous one. This presents a challenge for UI design: How can transitions be smoothly applied between multiple components when only one component exists in the DOM at any given time?

Here, successfully achieved transitioning between multiple components even when only one component exists in the DOM. This implementation enables a fluid transition between steps, allowing users to navigate through the process seamlessly.

Installation

Use your favourite manager to install the package:

yarn add component-switch-transition

npm install component-switch-transition --save

Example Demo

import React, { useState } from "react";
import CSSAnimationTransitionWrapper from "./CSSAnimationTransitionWrapper";
import "./styles.css";
import useNavigation from "./useNavigation";

interface ComponentProps {
  navigateToPreviousComponent: (id: string) => void;
  navigateToNextComponent: (id: string) => void;
}

const Component1: React.FC<ComponentProps> = ({ navigateToNextComponent }) => (
  <div className={`component`}>
    <h2>Component 1</h2>
    <button className="nav-btn" onClick={() => navigateToNextComponent("C2")}>
      Next
    </button>
  </div>
);

const Component2: React.FC<ComponentProps> = ({
  navigateToPreviousComponent,
  navigateToNextComponent,
}) => (
  <div className={`component`}>
    <h2>Component 2</h2>

    <div>
      <button
        className="nav-btn"
        onClick={() => navigateToPreviousComponent("C1")}
      >
        Prev
      </button>
      <button className="nav-btn" onClick={() => navigateToNextComponent("C3")}>
        Next
      </button>
    </div>
  </div>
);

const Component3: React.FC<ComponentProps> = ({
  navigateToPreviousComponent,
}) => (
  <div className={`component`}>
    <h2>Component 3</h2>

    <button
      className="nav-btn"
      onClick={() => navigateToPreviousComponent("C2")}
    >
      Prev
    </button>
  </div>
);

const ReactTransition: React.FC = () => {
  const [activeComponentId, setActiveComponentId] = useState<string>("C1");

  const {
    enterAnimation,
    existAnimation,
    goToPreviousComponent,
    goToNextComponent,
  } = useNavigation();

  const prevComponent = (activeComponentId: string): void => {
    goToPreviousComponent();
    setActiveComponentId(activeComponentId);
  };

  const nextComponent = (activeComponentId: string): void => {
    goToNextComponent();
    setActiveComponentId(activeComponentId);
  };

  const renderComponent = (
    Component: React.FC<ComponentProps>,
    existingComponentId: string
  ): React.ReactElement => (
    <CSSAnimationTransitionWrapper
      key={existingComponentId}
      show={activeComponentId === existingComponentId}
      customClassName={
        activeComponentId === existingComponentId
          ? enterAnimation
          : existAnimation
      }
      timeout={500}
      unmountOnExit={true}
    >
      <Component
        navigateToPreviousComponent={prevComponent}
        navigateToNextComponent={nextComponent}
      />
    </CSSAnimationTransitionWrapper>
  );

  return (
    <div className="transition-container">
      {renderComponent(Component1, "C1")}
      {renderComponent(Component2, "C2")}
      {renderComponent(Component3, "C3")}
    </div>
  );
};

export default ReactTransition;

CSSAnimationTransitionWrapper

• To enable switch transition animation, each component must be enclosed within the CSSAnimationTransitionWrapper component.

<CSSAnimationTransitionWrapper
  key={existingComponentId}
  show={activeComponentId === existingComponentId} //activeId is the id of component in viewport.
  customClassName={
    activeComponentId === existingComponentId //existingComponentId is the id of component that was rendered inside its children
      ? enterAnimation
      : existAnimation
  }
  timeout={500}
  unmountOnExit={true}
>
  <Component
    navigateToPreviousComponent={prevComponent}
    navigateToNextComponent={nextComponent}
  />
</CSSAnimationTransitionWrapper>

Properties

The component CSSAnimationTransitionWrapper accepts the following properties:

• timeout: A number representing the duration of the transition in milliseconds.
• show: A boolean indicating whether the component should be shown or hidden.
• customClassName: A string specifying a custom CSS class name for the transition animation.
• unmountOnExit: A boolean indicating whether the component should be unmounted from the DOM when it exits.
• children: A React element representing the component to be transitioned.

useSwitchTransition

Custom hook named useSwitchTransition is defined. This hook is responsible for managing transition between components and providing animation classes for transitioning between them.

const {
  enterAnimation,
  existAnimation,
  goToPreviousComponent,
  goToNextComponent,
} = useSwitchTransition();

Return Properties

• goToPreviousComponent: A function that allows navigating to the previous component in the sequence.
• goToNextComponent: A function that allows navigating to the next component in the sequence.
• enterAnimation: A string representing the CSS class name for the animation when a component enters the viewport.
• existAnimation: A string representing the CSS class name for the animation when a component exits the viewport.

License

This library is licensed under the MIT license.