react-ts-full-page-door v1.0.3

react-ts-full-page-door

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

]github-license-url

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:

DoorOptions

The DoorOptions object has the following properties:

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!