Add Slick Transitions to Your React App with React Transition

Description:

React Transition is a tiny React component that allows you to add smooth and configurable transitions to elements in your React app.

You can create fade, slide, and other transitions with simple props and CSS to enhance UI and UX. Inspired by Vue’s transition component, React Transition aims to bring similar capabilities to React.

How to use it:

1. Install with NPM:

# NPM
$ npm ireact-element-transition

2. Import the transition component and useState from React:

import {ReactTransition} from "./components";
import {useState} from "react";

3. Wrap element(s) to transition inside ReactTransition component:

<ReactTransition value={show} onTransitionEnd={doSomething} name="fade" ref="fooRef">
  <div>hello</div> 
</ReactTransition>

4. Control visibility with value prop:

const [isShow, setIsShow] = useState(true)

5. Add transition CSS with name matching prop:

.fade-enter-active {
  transition: opacity .4s ease; 
}
.fade-enter-from {
  opacity: 0;
}

6. Available props.

// Nested content to be rendered inside the component
children: ReactElement,
// Controls the visibility of the component.
value: boolean,
// Specifies the class name for styling.
name?: string,
// Event handler for transition end.
onTransitionend?: () => boolean,

Preview:

Add Slick Transitions to Your React App with React Transition

Add Comment