Disable touch/hover when using front and back sides

[VonPappen]

Discussed in https://github.com/rashidshamloo/react-flip-tilt/discussions/2

^{Originally posted by **VonPappen** March 19, 2024} Hello, first of all, great library, The effects are really neat! I've been trying to find a way to disable the flip event when hovering/touch. I would like the Card to be flipped and stay on the other side until it is touched again. I would like to replace it with my own function. Is this possible? `import styles from "./Tilt.module.css"; import { useState } from "react"; import { FlipTilt } from "react-flip-tilt"; import { FlipTiltRef } from "react-flip-tilt"; export default function TiltCard(props) { const [isFlipped, setIsFlipped] = useState(true); const handleClick = () => { setIsFlipped(!isFlipped); }; return (

{props.children}

            </div>
        }
        back={
            <div
                className={`${styles.parallaxContainer}  h-full w-full  flex justify-center items-center rounde-xl bg-slate-300/30`}
            >
                <div className={`${styles.parallaxBack} `}>2018</div>
            </div>
        }
    />
);

}`

This is what I have so far. but the problem is that the flip animation gets triggered twice. Any Workaround?

[rashidshamloo]

Sorry for my late reply. I'm not exactly sure what kind of effect you want to achieve but if you want to trigger the flip with click instead of hover you can do something like this:

import { useRef, useState } from "react";
import { FlipTilt, FlipTiltRef } from "react-flip-tilt";

const front = "/images/01-front.webp";
const back = "/images/01-back.webp";

function App(): React.ReactNode {
  const [isFlipped, setIsFlipped] = useState(true);

  const ref = useRef<FlipTiltRef | null>(null);

  const handleClick = () => {
    if (!isFlipped) return;
    setIsFlipped(false);
    ref.current?.flip();
  };

  const handleMouseLeave = () => {
    setIsFlipped(true);
  };

  return (
    <main className="flex items-center justify-center p-8">
      <FlipTilt
        width={165}
        borderRadius="16px"
        ref={ref}
        style={{ cursor: isFlipped ? "pointer" : undefined }}
        disabledFilter=""
        disabled={isFlipped}
        onClick={handleClick}
        onMouseLeave={handleMouseLeave}
        front={front}
        back={back}
      />
    </main>
  );
}

export default App;

https://codesandbox.io/p/devbox/cool-rain-qxh6q5