Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theomer77/react-transition-switch
A React component to switch between child components with CSS animations.
https://github.com/theomer77/react-transition-switch
animation css react react-component reactjs transition transitions
Last synced: 10 days ago
JSON representation
A React component to switch between child components with CSS animations.
- Host: GitHub
- URL: https://github.com/theomer77/react-transition-switch
- Owner: TheOmer77
- License: mit
- Created: 2023-10-29T15:53:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-31T19:43:38.000Z (3 months ago)
- Last Synced: 2024-11-02T14:35:28.016Z (17 days ago)
- Topics: animation, css, react, react-component, reactjs, transition, transitions
- Language: TypeScript
- Homepage: https://react-transition-switch.vercel.app
- Size: 4.95 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Transition Switch
React Transition Switch provides a simple and effective way to easily switch between different components with CSS animations. It's perfect for creating interactive and visually appealing transitions in your React applications.
## Installation
```bash
npm install react-transition-switch
```
## Usage
This package provides a `TransitionSwitch` parent component and a `TransitionSwitchItem` child component.
- The `TransitionSwitch` component accepts a `value` prop, and children which can be `TransitionSwitchItem` components. Components other than `TransitionSwitchItem` are not affected by the `value` prop.
- The `TransitionSwitchItem` component also accepts a `value` prop, and a child which must be a component that accepts a ref, or an element such as a div. If its value matches the parent's value, only this item's children will be rendered.
```jsx
import { useState } from 'react';
import {
TransitionSwitch,
TransitionSwitchItem,
} from 'react-transition-switch';
const MyComponent = () => {
const [value, setValue] = useState('item1');
return (
Item 1
Item 2
{/* Add more TransitionSwitchItems as needed */}
);
};
```
### Adding Transitions
To add transitions between items, you can use CSS animations. Simply add a CSS class to your parent `TransitionSwitch` component:
```jsx
Item 1
```
In your CSS file, define your animations for active/incoming and inactive/outgoing items, and add them to the correct children by their `data-state` attribute.
CSS example
```css
.fade {
position: relative;
}
.fade > * {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
.fade > [data-state='active'] {
animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fade > [data-state='inactive'] {
animation: fadeOut 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
```
### Optional `TransitionSwitch` props
| Prop | Type | Description |
| ------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `asChild` | `boolean` | Change the default `
` element for the one passed as a child, merging their props and behavior.
When set to true, this component must have a single child which accepts a ref, and its children should be `` components.
See [Radix UI composition](https://www.radix-ui.com/primitives/docs/guides/composition) |
| `autoAdjustHeight` | `boolean` | Whether or not the parent container should automatically adjust its height to that of the active child. |
| `autoAdjustWidth` | `boolean` | Whether or not the parent container should automatically adjust its width to that of the active child. |
| `directional` | `boolean` | Add a `data-direction` attribute to the parent element, representing the transition direction, which would have a value of either 'backward' or 'forward'. This allows to apply a different animation based on the transition direction. |