【React】react-tinder-cardを使ってtinderみたいなスワイプ機能を実装する

背景 ReactとTypeScriptを使ったアプリでtinderみたいなスワイプ機能を実装しようと調査していたところreact-tinder-cardというライブラリがありましたので実際に使ってみたメモを残します。 インストール 実装してみた 各関数の役割などはコメントアウトしています。 react-tinder-cardはボタンでのスワイプと手動でのスワイプの両方に対応しており、手動でスワイプする際はswiped > outOfFrameの順番で関数が発火し、ボタンでスワイプする際はswipe > swiped > outOfFrameの順番で関数が発火します。swipedという関数がcurrentIndexを更新する責務を持っています。 import React, { useState, useRef, useMemo } from 'react' import TinderCard