https://github.com/coreprocess/smooth-transition

Smooth transition between React components.
https://github.com/coreprocess/smooth-transition

component css-transition react react-component smooth-transition smoothtransition transition

Last synced: 12 days ago
JSON representation

Smooth transition between React components.

• Host: GitHub
• URL: https://github.com/coreprocess/smooth-transition
• Owner: coreprocess
• Created: 2023-01-29T23:54:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-31T21:00:42.000Z (almost 2 years ago)
• Last Synced: 2025-01-02T17:43:15.350Z (26 days ago)
• Topics: component, css-transition, react, react-component, smooth-transition, smoothtransition, transition
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# <SmoothTransition />

![npm version](https://badgen.net/npm/v/smooth-transition?icon=npm&label)

![GitHub checks](https://badgen.net/github/checks/teamrevin/smooth-transition/publish?icon=github&label=GitHub)

`` is a React component for elegantly transitioning between components. Its smooth fading effect and gliding height transition provides a seamless experience for your users as they switch between components.

[![Demo Video](https://i.ytimg.com/vi/297wjIV2VN0/maxresdefault.jpg)](https://www.youtube.com/watch?v=297wjIV2VN0)

([Demo Video](https://www.youtube.com/watch?v=297wjIV2VN0))

## Installation

Use your favourite manager to install the [package](https://www.npmjs.com/package/smooth-transition):

```sh

yarn add smooth-transition

```

```sh

npm install smooth-transition --save

```

## Example

```ts

import { TextField, Typography } from "@mui/material";

import React, { ChangeEventHandler, forwardRef } from "react";

import { SmoothTransition } from "smooth-transition";

type Props = {

    editMode: boolean;

    value: string;

    onChange: ChangeEventHandler;

};

export const Example = forwardRef(function Example(

    { editMode, value, onChange },

    ref

) {

    return (

         (

                    

                        {value}

                    

                ),

                (state) => (

                    

                ),

            ]}

            active={!editMode ? 0 : 1}

            duration={500}

        />

    );

});

```

## Properties

The component accepts the following properties:

-   `render: ((state: "enter" | "active" | "leave") => ReactNode)[]`: An array of render functions that return a `ReactNode`, representing the components that you want to transition between.

-   `active: number`: An integer specifying which component should be displayed.

-   `duration: number`: A number representing the duration of the transition in milliseconds.

## License

This library is licensed under the MIT license.

## Contributing

We welcome contributions to the `smooth-transition` library. To contribute, simply open a [pull request](https://github.com/teamrevin/smooth-transition/pulls) with your changes.