@zls233/react-swipe-deck

An iMessage-inspired multi-image component for React. It presents several images or cards as a compact swipeable deck, similar to the stacked multi-photo preview in iMessage conversations.

It supports mouse dragging, touch swiping, arrow controls, pagination dots, and index change callbacks.

Install

pnpm add @zls233/react-swipe-deck

Import the component and its default styles:

import { SwipeDeck } from "@zls233/react-swipe-deck";
import "@zls233/react-swipe-deck/style.css";

export function Gallery() {
  return (
    <SwipeDeck onIndexChange={(index) => console.log(index)}>
      <img src="/one.jpg" alt="" />
      <img src="/two.jpg" alt="" />
      <img src="/three.jpg" alt="" />
    </SwipeDeck>
  );
}

API

Prop	Type	Default	Description
children	ReactNode	required	Cards to render in the deck. Empty children render nothing; a single child renders without deck controls.
className	string	undefined	Class name applied to the root element.
onIndexChange	(index: number) => void	undefined	Called when the active card changes.
previousLabel	string	"Previous item"	Accessible label for the previous button.
nextLabel	string	"Next item"	Accessible label for the next button.
jumpToLabel	(index: number) => string	Jump to item ${index + 1}	Accessible label for pagination dots.

Development

pnpm install
pnpm typecheck
pnpm build
pnpm --dir demo dev

License

MIT