Calendar Flip#

1import React, { useState } from "react";
2import { PeelWrapper, PeelTop, PeelBack, PeelBottom, usePeel } from "react-peel";
3
4export function CalendarFlip() {
5  const [date, setDate] = useState(new Date());
6  const { peelRef, reset } = usePeel();
7
8  const nextDate = new Date(date);
9  nextDate.setDate(date.getDate() + 1);
10
11  return (
12    <PeelWrapper
13      ref={peelRef}
14      preset="calendar"
15      width={200}
16      height={180}
17      drag
18      onPeelProgress={(progress) => {
19        if (progress > 0.6) {
20          setDate(nextDate);
21          reset();
22        }
23      }}
24    >
25      <PeelTop>{date.getDate()}</PeelTop>
26      <PeelBack style={{ background: "#f5f5f5" }} />
27      <PeelBottom>{nextDate.getDate()}</PeelBottom>
28    </PeelWrapper>
29  );
30}