react-card-flipを使って回転するカードレイアウトを作る

GROWI でログイン画面の React 化に伴い、 JQuery で実現していたログインと新規登録が引っくり返る画面を実装する必要がありました。

今までは transform: rotateY(180deg);を使って回転。 z-index との相性も良くなく動作が安定せず...

そこで導入したのが react-card-flip external_link。
とても簡単に回転するフォームを実現できました。該当のPRはこちら external_link

Youtube に解説動画が上がっているのでさっくり把握するには良さそうです → https://www.youtube.com/watch?v=qrZFo1jLG-4&ab_channel=HongLy external_link

GROWI のようにログインと新規ユーザー登録のような画面ではすごく相性いいと思います。

こういった回転する挙動はトランプゲームとかでも使えそうです。

フリップに感動 😵

example.js
import { useState } from "react";
import ReactCardFlip from "react-card-flip";

export default ({ closeNav }) => {
  const [isFlipped, setIsFlipped] = useState(false);

  function flipCard() {
    setIsFlipped(!isFlipped);
  }

  return (
    <div className="container" onClick={closeNav}>
      <ReactCardFlip isFlipped={isFlipped} flipDirection="vertical">
        <div className="front" onClick={flipCard}>
          <h2>Introduction</h2>
          <p>名前 : itizawa</p>
          <p>仕事 : システムエンジニア</p>
          <p>
            技術 :
            Javascript・Node.js・React・Next.js・MongoDB・Bootstrap4・RESTfulAPI
          </p>
        </div>
        <div className="back" onClick={flipCard}>
          <h2>Personal</h2>
          <p>趣味 : 映画観賞</p>
        </div>
      </ReactCardFlip>
    </div>
  );
};