https://github.com/azganoth/simple-motion-react
A lightweight React transition library for animating component lifecycle changes.
https://github.com/azganoth/simple-motion-react
motion react transition
Last synced: 2 months ago
JSON representation
A lightweight React transition library for animating component lifecycle changes.
- Host: GitHub
- URL: https://github.com/azganoth/simple-motion-react
- Owner: Azganoth
- License: mit
- Created: 2025-01-13T22:59:01.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-29T23:55:40.000Z (11 months ago)
- Last Synced: 2025-10-24T20:47:47.440Z (8 months ago)
- Topics: motion, react, transition
- Language: TypeScript
- Homepage: https://simple-motion-react.vercel.app
- Size: 522 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/Contributing.mdx
- License: LICENSE
Awesome Lists containing this project
README
# @simple-motion/react
[](https://codecov.io/gh/Azganoth/simple-motion-react)
A lightweight React transition library for animating component lifecycle changes.
---
## Features
- **Declarative API**: Simple and intuitive API for handling transitions.
- **Lifecycle Control**: Hooks for each phase of the transition (`entering`, `entered`, `exiting`, `exited`).
- **CSS Transitions**: Easily apply CSS classes for animations.
- **Group Animations**: Animate a list of components as they are added or removed.
- **Switchable Animations**: Seamlessly transition between two components.
- **Lightweight**: Small and efficient with zero runtime dependencies, ensuring a minimal impact on your bundle size.
[Documentation](https://simple-motion-react.vercel.app/)
## Installation
```bash
npm install @simple-motion/react
```
```bash
pnpm add @simple-motion/react
```
## Usage
### Transition
The `Transition` component is the foundation of the library, allowing you to animate a component's mount and unmount lifecycle.
```typescript
import { Transition } from '@simple-motion/react';
function App() {
const [inProp, setInProp] = useState(true);
return (
<>
setInProp(!inProp)}>
Click to {inProp ? 'Exit' : 'Enter'}
{phase => (
I'm a fade Transition!
)}
>
);
}
```
### CSSTransition
The `CSSTransition` component extends the `Transition` component, providing a way to apply CSS classes for animations.
```typescript
import { CSSTransition } from '@simple-motion/react';
import './styles.css';
function App() {
const [inProp, setInProp] = useState(true);
return (
<>
setInProp(!inProp)}>
Click to {inProp ? 'Exit' : 'Enter'}
I'm a CSS Transition!
>
);
}
```
And in your CSS file:
```css
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}
```
### TransitionGroup
The `TransitionGroup` component manages a set of `Transition` or `CSSTransition` components in a list.
```typescript
import { TransitionGroup, CSSTransition } from '@simple-motion/react';
import './styles.css';
function App() {
const [items, setItems] = useState([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]);
const addItem = () => {
const id = Date.now();
setItems(prevItems => [...prevItems, { id, text: `Item ${id}` }]);
};
const removeItem = (id) => {
setItems(prevItems => prevItems.filter(item => item.id !== id));
};
return (
<>
Add Item
{items.map(({ id, text }) => (
{text}
removeItem(id)}>Remove
))}
>
);
}
```
### TransitionSwitch
The `TransitionSwitch` component is used to transition between two components.
```typescript
import { TransitionSwitch, CSSTransition } from '@simple-motion/react';
import './styles.css';
function App() {
const [showFirst, setShowFirst] = useState(true);
return (
<>
setShowFirst(!showFirst)}>
Switch
{showFirst ? 'First Component' : 'Second Component'}
>
);
}
```
## Development
To get started with developing `simple-motion-react`:
1. **Clone the repository**
2. **Install dependencies**: `pnpm install`
3. **Run Storybook**: `pnpm storybook`
4. **Run tests**: `pnpm test`
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.