react swiperableを使ってみた

[公式ページ](https://react-swipeable-views.com/)
[ここで](https://react-swipeable-views.com/demos/demos/)色々触れる。

```sh
$ npx create-react-app ディレクトリ名
$ yarn add react-swipeable-views
```

で導入した。

[ドキュメント](https://react-swipeable-views.com/getting-started/usage/)を参考に以下のように書いた。

```jsx:App.js
import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 25,
    minHeight: 50,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const App = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      {/* slide n°2 */}
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      {/* slide n°3 */}
    </div>
  </SwipeableViews>
);

export default App
```

```jsx:index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

ReactDOM.render(
    <App />, 
    document.getElementById('root')
)
```

と書いたところ正常にスワイプすることが出来なかった。
しかし検証ツールを開いた状態でならばスワイプ出来た。

そこでもう少し見てみると[ここのページ](https://react-swipeable-views.com/getting-started/example-projects/)から公式のgithubに行ける事がわかったので比較してみた。

そしたら```enableMouseEvents```を追加したら無事に解決出来た。

```jsx:App.js
const App = () => (
  <SwipeableViews enableMouseEvents>
//省略
  </SwipeableViews>
);

export default App
```

##タブの導入
material uiを使って導入する
```sh
$yarn add @material-ui/core
```

また

```jsx
import React,{useState} from 'react';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import SwipeableViews from 'react-swipeable-views';
// import "./App.css";

import Item1 from "./image/luffy.png"
import Item2 from "./image/chopper.png"
import Item3 from "./image/sogeking.png"

const styles = {
  slide: {
    padding: 25,
    minHeight: 180,
    color: '#fff',
    display: "flex",
    justifyContent: "center",
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
  image: {
      width: "auto",
    height: "280px",
      margin:"0 auto",
      
    },
};

const App = () => {
  const [tabIndex, setTabIndex] = useState(0);
  
  const handleChange = (index) => {
    setTabIndex(index)
  }

  return (
    <>
      <Tabs
        value={tabIndex}
        fullWidth
        onChange={(e,value)=>handleChange(value)}
        style={styles.tabs}
        variant="fullWidth"
        indicatorColor="primary"
      >
          <Tab label="ルフィ" />
          <Tab label="チョッパー" />
          <Tab label="ウソップ" />
      </Tabs>
      
      <SwipeableViews
        enableMouseEvents
        resistance
        animateHeight
        index={tabIndex}
        onChangeIndex={(index) => handleChange(index)}
      >
      <div style={Object.assign({}, styles.slide, styles.slide1)}>
        <img src={Item1} style={Object.assign({}, styles.image)}></img>
      </div>
      <div style={Object.assign({}, styles.slide, styles.slide2)}>
        <img src={Item2} style={Object.assign({}, styles.image)}></img>
      </div>
      <div style={Object.assign({}, styles.slide, styles.slide3)}>
          <img src={Item3} style={Object.assign({}, styles.image)}></img>
      </div>
      </SwipeableViews>
      </>
  )
};

export default App
```