Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arshad-yaseen/react-animate-presence
A lightweight React hook for managing enter/exit animations with CSS classes or Tailwind CSS ⚡️
https://github.com/arshad-yaseen/react-animate-presence
animation framer-motion hook presence react
Last synced: about 1 month ago
JSON representation
A lightweight React hook for managing enter/exit animations with CSS classes or Tailwind CSS ⚡️
- Host: GitHub
- URL: https://github.com/arshad-yaseen/react-animate-presence
- Owner: arshad-yaseen
- License: mit
- Created: 2024-07-29T16:11:50.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-31T06:59:50.000Z (3 months ago)
- Last Synced: 2024-09-29T03:37:31.865Z (about 2 months ago)
- Topics: animation, framer-motion, hook, presence, react
- Language: TypeScript
- Homepage: https://react-animate-presence.vercel.app
- Size: 441 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-animate-presence
A lightweight and flexible React hook for managing enter/exit animations with CSS classes or Tailwind CSS. Easily add smooth transitions to your components as they mount and unmount.
## Features
- 🚀 Simple hook for managing enter/exit animations
- 🎨 Works with any custom CSS animations and Tailwind CSS animations
- 🔄 Smooth transitions between mount and unmount states
## The problem
While animating a modal opening in React is straightforward, adding closing animations is challenging. Exit animations are tricky because components typically unmount immediately. A common workaround is keeping the element mounted, but this can impact performance and accessibility.
## The solution
**react-animate-presence** solves this issue by managing both enter and exit animations efficiently.
Check out the [demo here](https://react-animate-presence.vercel.app).
## Installation
```bash
npm install react-animate-presence
```
## Usage
### Basic Example
```jsx
import {useState} from 'react';
import {useAnimatePresence} from 'react-animate-presence';
function MyComponent() {
const [isVisible, setIsVisible] = useState(true);
const {ref, animationClassName, isRendered} = useAnimatePresence({
visible: isVisible,
animation: {
enter: 'fade-in',
exit: 'fade-out',
},
onExitComplete: () => console.log('Exit animation completed'),
});
return (
<>
setIsVisible(!isVisible)}>Toggle
{isRendered && (
Fade in/out content
)}
>
);
}
```
### With CSS
Define your animation classes in your CSS file:
```css
.fade-in {
animation: fadeIn 0.3s ease-in;
}
.fade-out {
animation: fadeOut 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
### With Tailwind CSS
If you're using Tailwind CSS, you can define custom animation classes in your `tailwind.config.ts`:
```js
import type { Config } from "tailwindcss";
const config: Config = {
theme: {
extend: {
animation: {
'fade-in': 'fadeIn 0.3s ease-in',
'fade-out': 'fadeOut 0.3s ease-out',
},
keyframes: {
fadeIn: {
'0%': {opacity: '0'},
'100%': {opacity: '1'},
},
fadeOut: {
'0%': {opacity: '1'},
'100%': {opacity: '0'},
},
},
},
},
};
export default config;
```
Then use these classes in your component:
```jsx
const {ref, animationClassName, isRendered} = useAnimatePresence({
visible: isVisible,
animation: {
enter: 'animate-fade-in',
exit: 'animate-fade-out',
},
});
```
## `useAnimatePresence` API
```typescript
useAnimatePresence(props: UseAnimatePresenceProps): UseAnimatePresenceReturn
```
#### Props
| Prop | Type | Default | Description |
| ---------------- | ----------------- | ------- | --------------------------------------------------------- |
| `visible` | `boolean` | `false` | Controls the visibility of the element |
| `animation` | `AnimationConfig` | - | Defines CSS class names for enter and exit animations |
| `onExitComplete` | `() => void` | - | Optional callback triggered when exit animation completes |
#### Returns
| Property | Type | Description |
| -------------------- | -------------------- | ----------------------------------------------------------- |
| `ref` | `React.RefObject` | React ref to be attached to the animated element |
| `animationClassName` | `string` | Current active animation class name |
| `isRendered` | `boolean` | Indicates if the element should be rendered in the DOM |
| `isExiting` | `boolean` | Indicates if the element is currently in its exit animation |
## Contributing
For guidelines on contributing, Please read the [contributing guide](https://github.com/arshad-yaseen/react-animate-presence/blob/main/CONTRIBUTING.md).
We welcome contributions from the community to enhance react-animate-presence capabilities and make it even more powerful ❤️