README
React Transition
Library that helps you create smooth css transitions in your react app.
Why?
I decided to create this package because often used react-transition-group
but I didn't like some things about it. For instance you have to pass timeout
or provide your custom addEndListener
. Also you don't have a "move" transition
for <TransitionGroup />
.
Install
Right now this library is published as @ayub-begimkulov/react-transition
. I used this name to publish the first version, but I'm still not sure how to name it (so if you how any ideas feel free to open an issue).
npm:
npm i @ayub-begimkulov/react-transition
or yarn:
yarn add @ayub-begimkulov/react-transition
Note that this library uses hooks, so you need to have react
and react-dom
16.8.0 or higher.
Usage
CSS Transition
import React, { useState } from "react";
import { Transition } from "@ayub-begimkulov/react-transition";
import "./index.css";
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<button onClick={() => setVisible(v => !v)}>Toggle</button>
<Transition visible={visible} name="fade">
<div style={{ height: 200, width: 200, background: "black" }}></div>
</Transition>
</>
);
};
.fade-leave-to,
.fade-enter-from {
opacity: 0;
transform: translateX(300px);
}
.fade-enter-active,
.fade-leave-active {
transition: all 500ms ease;
}
.fade-leave-from,
.fade-enter-to {
opacity: 1;
transform: translateX(0);
}
CSS Animation
import React, { useState } from "react";
import { Transition } from "@ayub-begimkulov/react-transition";
import "./index.css";
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<button onClick={() => setVisible(v => !v)}>Toggle</button>
<Transition visible={visible} name="fade-animation">
<div style={{ height: 200, width: 200, background: "black" }}></div>
</Transition>
</>
);
};
.fade-animation-enter-active {
animation: rotate-in 500ms ease;
}
.fade-animation-leave-active {
animation: rotate-in 500ms ease reverse;
}
.fade-animation-move {
transition: transform 500ms ease;
}
@keyframes rotate-in {
0% {
transform: scale(0) rotate(360deg);
}
100% {
transform: scale(1) rotate(0);
}
}
TransitionGroup Move
import React, { useState } from "react";
import { Transition, TransitionGroup } from "@ayub-begimkulov/react-transition";
import { shuffle } from "lodash-es";
import "./index.css";
const makeArr = () => {
return Array(81)
.fill(null)
.map((_, index) => ({
id: "