react-ts-full-page-door

A React library written in TypeScript for creating smooth full-page door animations to switch between components.

Live Demo

Installation

To install the library, run the following command in your project directory:

npm install react-ts-full-page-door

Usage

Please refer to the example section for a complete usage example.

API

Wrap your app with the FullPageDoorChangeProvider and use the useDoorAnimation hook to get access to the startAnimation function. The startAnimation function accepts the following parameters:

Parameter	Type	Description	Required	Default Value
subContent	ReactNode	New content to display after the animation	Yes	-
doorContent	ReactElement	Content to display on the doors during the animation	No	-
doorOptions	Partial	Object containing options for customizing the door animation	No	See below

DoorOptions

The DoorOptions object has the following properties:

Property	Type	Description	Default Value
color	string	Background color of the doors	'#1c2d4f'
closingDuration	number	Duration of the door closing animation (ms)	500
openingDuration	number	Duration of the door opening animation (ms)	500
closedDuration	number	Duration the doors will remain closed (ms)	1000

Example

import React from 'react'
import { FullPageDoorChangeProvider, useDoorAnimation } from 'react-ts-full-page-door'

const MyApp = () => {
  const { startAnimation } = useDoorAnimation()

  const handleClick = () => {
    startAnimation(
      <div>New content to display</div>,
      <div>Door content</div>,
      { color: '#FF0000', closingDuration: 1000, openingDuration: 1000, closedDuration: 2000 },
    )
  }

  return (
    <div>
      <button onClick={handleClick}>Start animation</button>
    </div>
  )
}

const App = () => {
  return (
    <FullPageDoorChangeProvider>
      <MyApp />
    </FullPageDoorChangeProvider>
  )
}

export default App

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

If you find any issues or have suggestions, please feel free to open an issue on the GitHub repository. Contributions are always welcome!