Overview

Flips an element, revealing its hidden face.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}

About

This is an original component from Inpulse.

It can be used to create smooth transition effects and animations.

Installation

pnpm

pnpm add @inpulse-ui/flip

bun

bun add @inpulse-ui/flip

yarn

yarn add @inpulse-ui/flip

npm

npm install @inpulse-ui/flip

API Reference

Root

Contains all the flip component parts.

Prop	Type	Default Value	Required
defaultToggled	boolean	false	No
onChange	function	-	No
toggled	boolean	false	No

Content

Wraps the content that will be flipped.

Prop	Type	Default Value	Required
axis	enum	xy	No
reverse	boolean	false	No
useHover	boolean	false	No

Trigger

The button that activates the flip effect.

Prop	Type	Default Value	Required
asChild	boolean	false	No

Usage

Wrap all flip component parts with the Flip component. The FlipContent contains both the FlipFront and FlipBack sides. Use the FlipTrigger to activate the flip effect when clicked.

<Flip>
  <FlipContent>
    <FlipFront>Front</FlipFront>
    <FlipBack>Back</FlipBack>
  </FlipContent>
  <FlipTrigger>Toggle</FlipTrigger>
</Flip>

It is recommended to apply shared styles between both the front and back sides directly to the FlipContent component using the className property, to avoid code duplication, ensure consistency and improve the animation.

Examples

Activate with button

Use the FlipTrigger component to activate the flip effect. The contents of the back will be displayed when the button is pressed.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}

Use hover

Apply the useHover property to activate the flip effect when hovering over the element. The back side content will be displayed while the mouse is over the FlipContent. Note that this behavior only works on desktop devices. Ensure there is another method to allow back-side content to be viewed on mobile devices.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip useHover>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
    </Flip>
  );
}

Be careful when using the useHover property, as it may not work as expected on touch devices.

Reverse

If you want to reverse the direction of the flip effect, add the reverse property to the Flip component. This property has an effect on both horizontal and vertical orientation.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip reverse>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}

Vertical orientation

By default, the flip effect will be applied horizontally. To apply the effect vertically, add the axis property to the Flip component, with the value y.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip axis="y">
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}

Toggled by Default

To have the back side content displayed by default, add the defaultToggled property to the Flip component.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip defaultToggled>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}

Events

Use the onChange event to perform an action every time the Flip component is toggled.

Preview

Code

import {
  Flip,
  FlipTrigger,
  FlipContent,
  FlipFront,
  FlipBack,
} from '@inpulse-ui/flip';

export function Demo() {
  return (
    <Flip onChange={(toggled) => console.log({ toggled })}>
      <FlipContent>
        <FlipFront>Front</FlipFront>
        <FlipBack>Back</FlipBack>
      </FlipContent>
      <FlipTrigger>Toggle</FlipTrigger>
    </Flip>
  );
}