Magazine#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";
3
4interface MagazineProps {
5  pages: React.ReactNode[];
6}
7
8export function Magazine({ pages }: MagazineProps) {
9  const [index, setIndex] = useState(0);
10  const { peelRef, reset } = usePeel();
11
12  const current = pages[index];
13  const next = pages[index + 1];
14
15  return (
16    <PeelWrapper
17      ref={peelRef}
18      preset="pageFlip"
19      width={260}
20      height={340}
21      drag
22      onPeelProgress={(progress) => {
23        if (progress > 0.6 && index < pages.length - 1) {
24          setIndex((i) => i + 1);
25          reset();
26        }
27      }}
28    >
29      <PeelTop style={{ background: "#fff", padding: 16 }}>{current}</PeelTop>
30      <PeelBack style={{ background: "#f5f5f5" }} />
31      <PeelBottom style={{ background: "#fafafa", padding: 16 }}>
32        {next || "End of issue"}
33      </PeelBottom>
34    </PeelWrapper>
35  );
36}

1<Magazine
2  pages={[
3    <div key="one">Cover Story</div>,
4    <div key="two">Feature Article</div>,
5    <div key="three">Photo Spread</div>,
6  ]}
7/>