component-transition-animation v1.0.2

ComponentTransitionAnimation

Getting Started

ComponentTransitionAnimation creates a fade out-in transition animation between components to help create a better user experience

Example

https://github.com/user-attachments/assets/c9904428-5bba-4d63-a1fc-87effdab5a77

Prerequisites

• Node.js (>= 16.x)
• npm (or yarn)

Installation

npm i component-transition-animation

Usage

"use client";

import React from 'react';
import ComponentTransitionAnimation from 'component-transition-animation';
import ProgressDemo from "../ProgressBar/index";
import RegisterEmailStage from "../RegisterEmailStage/index";
import RegisterPasswordStage from "../RegisterPasswordStage/index";
import RegisterSuccess from "../RegisterSuccess/index";
import { useUserRegister } from "@/providers/UserRegisterProvider/index";
import './index.css'

const RegisterPage = () => {
  const {
    currentStage
  } = useUserRegister();

  const registerStages: React.ReactNode[] = [
    <RegisterEmailStage />,
    <RegisterPasswordStage />,
    <RegisterSuccess />,
  ]

  return (
    <>
      <div className='rp-wrapper'>
        <div id='user-register-container' className='rp-form'>
          <h1 className='rp-h1'>Register</h1>
          <ProgressDemo progress={(currentStage / (registerStages.length - 1)) * 100} />
          <ComponentTransitionAnimation
            components={registerStages}
            currentStep={currentStage}
            transitionDuration={1000}
          />
        </div>
      </div>
    </>
  )
}

export default RegisterPage;

Props