Photo Album#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";
3
4interface PhotoAlbumProps {
5  photos: string[];
6}
7
8export function PhotoAlbum({ photos }: PhotoAlbumProps) {
9  const [index, setIndex] = useState(0);
10  const { peelRef, reset } = usePeel();
11
12  const current = photos[index];
13  const next = photos[index + 1];
14
15  return (
16    <PeelWrapper
17      ref={peelRef}
18      preset="photoAlbum"
19      width={260}
20      height={340}
21      drag
22      onPeelProgress={(progress) => {
23        if (progress > 0.8 && index < photos.length - 1) {
24          setIndex((i) => i + 1);
25          reset();
26        }
27      }}
28    >
29      <PeelTop style={{ backgroundImage: `url(${current})`, backgroundSize: "cover" }} />
30      <PeelBack style={{ backgroundImage: `url(${current})`, backgroundSize: "cover" }} />
31      <PeelBottom
32        style={{
33          backgroundImage: next ? `url(${next})` : undefined,
34          backgroundColor: next ? undefined : "#eceff1",
35          backgroundSize: "cover",
36        }}
37      />
38    </PeelWrapper>
39  );
40}

1<PhotoAlbum photos={["/photos/one.jpg", "/photos/two.jpg", "/photos/three.jpg"]} />