react-swipeable-views から Swiper への移行

1

yarn add swiper

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import * as React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function Page() {
  return (
    <Swiper>
      <SwiperSlide>
        <p>Slide One</p>
      </SwiperSlide>
      <SwiperSlide>
        <p>Slide Two</p>
      </SwiperSlide>
      <SwiperSlide>
        <p>Slide Three</p>
      </SwiperSlide>
    </Swiper>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import * as React from 'react';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import type { Swiper as SwiperCore } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

type TabPanelProps = React.PropsWithChildren<{
  index: number;
  value: number;
}>;

function TabPanel({ children, value, index }: TabPanelProps) {
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `full-width-tab-${index}`,
    'aria-controls': `full-width-tabpanel-${index}`,
  };
}

function FullWidthTabs() {
  const [swiper, setSwiper] = React.useState<SwiperCore | null>(null);
  const [value, setValue] = React.useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
    swiper?.slideTo(newValue);
  };
  const onSwiper = (currentSwiper: SwiperCore) => {
    const swiperInstance = currentSwiper;
    setSwiper(swiperInstance);
  };
  const onSlideChange = (currentSwiper: SwiperCore) => {
    setValue(currentSwiper.activeIndex);
  };

  return (
    <Box sx={{ bgcolor: 'background.paper', width: 1 }}>
      <AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="secondary"
          textColor="inherit"
          variant="fullWidth"
          aria-label="full width tabs example"
        >
          <Tab label="Item One" {...a11yProps(0)} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <Swiper
        simulateTouch={false}
        onSwiper={onSwiper}
        onSlideChange={onSlideChange}
      >
        <SwiperSlide>
          <TabPanel value={value} index={0}>
            Item One
          </TabPanel>
        </SwiperSlide>
        <SwiperSlide>
          <TabPanel value={value} index={1}>
            Item Two
          </TabPanel>
        </SwiperSlide>
        <SwiperSlide>
          <TabPanel value={value} index={2}>
            Item Three
          </TabPanel>
        </SwiperSlide>
      </Swiper>
    </Box>
  );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

function Page() {
  // Tabs のステートフック
  const [value, setValue] = React.useState(0);

  // Tabs のイベントハンドラ
  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  // MUI Tabs のコンポーネント (a11yProps は省略)
  return (
    <Tabs
      value={value}
      onChange={handleChange}
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  ); 
}

1
2
3

import type { Swiper as SwiperCore } from 'swiper';

const [swiper, setSwiper] = React.useState<SwiperCore | null>(null);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const onSwiper = (currentSwiper: SwiperCore) => {
  const swiperInstance = currentSwiper;
  setSwiper(swiperInstance);
};

return (
  <Swiper onSwiper={onSwiper}>
    <SwiperSlide />
    <SwiperSlide />
    <SwiperSlide />
  </Swiper>
);

1
2
3
4
5

const handleChange = (event: React.SyntheticEvent, newValue: number) => {
  setValue(newValue);
  // Swiper を動かす
  swiper?.slideTo(newValue);
};

1
2

// 型が SwiperCore | null なのでオプショナルチェーン演算子を付加
swiper?.slideTo(newValue);

1
2
3

const onSlideChange = (currentSwiper: SwiperCore) => {
  setValue(currentSwiper.activeIndex);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

return (
  <Swiper 
    onSwiper={onSwiper} 
    onSlideChange={onSlideChange}
  >
    <SwiperSlide />
    <SwiperSlide />
    <SwiperSlide />
  </Swiper>
);

1
2
3
4

<Swiper simulateTouch={false}>
  <SwiperSlide />
  <SwiperSlide />
</Swiper>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import * as React from 'react';
import { type Swiper as SwiperCore, Keyboard } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function Page() {
  return (
    <Swiper
      modules={[Keyboard]}
      keyboard={{
        enabled: true,
      }}
    >
      <SwiperSlide />
      <SwiperSlide />
      <SwiperSlide />
    </Swiper>
  );
}