https://github.com/gfazioli/mantine-flip

A Mantine extension Flip component
https://github.com/gfazioli/mantine-flip

Last synced: about 1 month ago
JSON representation

A Mantine extension Flip component

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-flip
• Owner: gfazioli
• License: mit
• Created: 2024-02-05T10:54:21.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-10-05T09:45:07.000Z (about 2 months ago)
• Last Synced: 2024-10-09T05:17:24.392Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-flip/
• Size: 11.8 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Mantine Flip Component



  



---



  

    

  

  

  

    

  

  









## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

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.

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. |