https://github.com/gfazioli/mantine-flip
A Mantine UI Library Extension Flip component
https://github.com/gfazioli/mantine-flip
component flip mantine mantine-ui mantine-v7 nextjs reactjs typescipt
Last synced: 6 months ago
JSON representation
A Mantine UI Library Extension Flip component
- Host: GitHub
- URL: https://github.com/gfazioli/mantine-flip
- Owner: gfazioli
- License: mit
- Created: 2024-02-05T10:54:21.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-14T14:04:40.000Z (7 months ago)
- Last Synced: 2025-04-14T15:25:13.473Z (7 months ago)
- Topics: component, flip, mantine, mantine-ui, mantine-v7, nextjs, reactjs, typescipt
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-flip/
- Size: 15.8 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Mantine Flip Component
https://github.com/user-attachments/assets/cc968450-9d8c-4b16-be58-a6766597742e
---
[](https://www.npmjs.com/package/@gfazioli/mantine-flip)
[](https://www.npmjs.com/package/@gfazioli/mantine-flip)
[](https://www.npmjs.com/package/@gfazioli/mantine-flip)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
[](https://mantine.dev/)
It allows for easy management of two separate views, such as in the cases of a registration form and a login form.
Essentially, when switching between views, the component will handle the flip animation.
[](https://youtu.be/RzRUb3IDcDw)
[](https://gfazioli.github.io/mantine-flip/)
[](https://mantine-extensions.vercel.app/)
👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.
## Installation
```sh
npm install @gfazioli/mantine-flip
```
or
```sh
yarn add @gfazioli/mantine-flip
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-flip/styles.css';
```
## Usage
```tsx
import { Flip } from '@gfazioli/mantine-flip';
function Demo() {
return (
Front Card
Flip Back
Back Card
Flip Front
);
}
```
As you can see, the `Flip` component wraps two children, which are the two views that you want to flip between.
The `Flip.Target` component is used to define the trigger for the flip animation. It can be any component, such as a button, or a link, or even a div.
## Props
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| perspective | string | 1000px | The perspective property defines how far the object is away from the user. |
| duration | number | .8 | The duration in seconds of the flip animation. |
| easing | string | ease-in-out | The easing function to be used for the flip animation. |
| flipped | boolean | false | The initial state of the controlled Flip component. |
| defaultFlipped | boolean | false | The default state of the uncontrolled flip component. |
| direction | 'horizontal' or 'vertical' | 'horizontal' | The direction of the flip animation. |
| directionFlipIn | 'negative' or 'positive' | 'negative' | The direction of the flip animation when flipping in. |
| directionFlipOut | 'negative' or 'positive' | 'positive' | The direction of the flip animation when flipping out. |
| onChange | (flipped: boolean) => void | - | Callback to be called when the flip state changes. |
| onBack | () => void | - | Callback to be called when the flip state changes to false. |
| onFront | () => void | - | Callback to be called when the flip state changes to true. |