Mantine Flip Component

Overview

This component is created on top of the Mantine 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 library.

Installation

npm install @gfazioli/mantine-flip

or

yarn add @gfazioli/mantine-flip

After installation import package styles at the root of your application:

import '@gfazioli/mantine-flip/styles.css';

Usage

import { Flip } from '@gfazioli/mantine-flip';

function Demo() {
  return (
    <Flip h={200} w={200}>

        <Paper radius="md" withBorder p="lg" shadow="md">
          <h3>Front Card</h3>
          <Flip.Target>
            <Button>Flip Back</Button>
          </Flip.Target>
        </Paper>

        <Paper radius="md" withBorder p="lg" shadow="md">
          <h3>Back Card</h3>
          <Flip.Target>
            <Button>Flip Front</Button>
          </Flip.Target>
        </Paper>

    </Flip>
  );
}

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.

https://github.com/user-attachments/assets/cc968450-9d8c-4b16-be58-a6766597742e