How to use react-swipeable-views-utils - 10 common examples
To help you get started, we’ve selected a few react-swipeable-views-utils examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
oliviertassinari / react-swipeable-views / docs / src / pages / demos / DemoHocs.js View on Github 
/* eslint-disable react/no-multi-comp */
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay, virtualize, bindKeyboard } from 'react-swipeable-views-utils';
import { mod } from 'react-swipeable-views-core';
const EnhancedSwipeableViews = bindKeyboard(autoPlay(virtualize(SwipeableViews)));
const styles = {
slide: {
padding: 15,
minHeight: 100,
color: '#fff',
},
slide1: {
backgroundColor: '#FEA900',
},
slide2: {
backgroundColor: '#B3DC4A',
},
slide3: {
backgroundColor: '#6AC0FF',
},/* eslint-disable react/no-multi-comp */
import React from 'react';
import Button from '@material-ui/core/Button';
import SwipeableViews from 'react-swipeable-views';
import { virtualize, bindKeyboard } from 'react-swipeable-views-utils';
import { mod } from 'react-swipeable-views-core';
const VirtualizeSwipeableViews = bindKeyboard(virtualize(SwipeableViews));
const styles = {
slide: {
padding: 15,
minHeight: 100,
color: '#fff',
},
slide1: {
backgroundColor: '#FEA900',
},
slide2: {
backgroundColor: '#B3DC4A',
},
slide3: {
backgroundColor: '#6AC0FF',
},// @flow
import type { EventElement } from './types';
import React, { Component } from 'react';
import SwipeableViews from 'react-swipeable-views';
import { virtualize } from 'react-swipeable-views-utils';
const VirtualizeSwipeableViews = virtualize(SwipeableViews);
import DayView from './DayView';
import MultipleDaysView from './MultipleDaysView';
import { addDays, diffDays, startOfDay } from './dateUtils';
function getEventsFromChildren(children?: EventElement | EventElement[]) {
if(children == null) {
return [];
} else if (!Array.isArray(children)) {
return [children];
} else {
return children;
}
}
const referenceDate = new Date(2017,1,1);import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import withStyles from '@material-ui/core/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import BaseDialog from './BaseDialog';
import SwipeableViews from 'react-swipeable-views';
import MobileStepper from '@material-ui/core/MobileStepper';
import { autoPlay } from 'react-swipeable-views-utils';
const logo = require('../../images/ahorta-logo.png');
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{
label: 'A NODE MCU with a sensor',
description: 'We use a Node MCU Module with a Micropython firmware to send requests about the humidity state',
imgPath:
'https://i0.wp.com/alexandremagno.net/wp-content/uploads/2018/12/Soil_Moisture_Interfacing_Diagram.png?resize=700%2C522&ssl=1',
},
{
label: 'We read the plant humidity',
description: 'With the sensor we read the humidity level and send the result to our server',
imgPath:
'https://i1.wp.com/alexandremagno.net/wp-content/uploads/2018/12/soil-moisture-sensor-e1467578282801-1.png?w=1104&ssl=1',
},
{
label: 'It fits with your plant',import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{
label: 'San Francisco – Oakland Bay Bridge, United States',
imgPath:
'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bird',
imgPath:
'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bali, Indonesia',
imgPath:
'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',import React from "react";
import { Link, withPrefix } from "gatsby";
import MobileStepper from "@material-ui/core/MobileStepper";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import SwipeableViews from "react-swipeable-views";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import { autoPlay } from "react-swipeable-views-utils";
import withStyles from '@material-ui/styles/withStyles';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const styles = {
cardMedia: {
height: "200px"
}
};
class Carousel extends React.Component {
state = {
activeStep: 0,
};
handleNext = () => {
this.setState(prevState => ({
activeStep: prevState.activeStep + 1,
}));import React from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{
label: 'San Francisco – Oakland Bay Bridge, United States',
imgPath:
'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bird',
imgPath:
'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bali, Indonesia',
imgPath:
'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',import React from 'react';
import { makeStyles, useTheme } from '@material-ui/styles';
import MobileStepper from '@material-ui/core/MobileStepper';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{
label: 'San Francisco – Oakland Bay Bridge, United States',
imgPath:
'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bird',
imgPath:
'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'Bali, Indonesia',
imgPath:
'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80',import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import withStyles from '@material-ui/styles/withStyles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import BaseDialog from './BaseDialog';
import SwipeableViews from 'react-swipeable-views';
import MobileStepper from '@material-ui/core/MobileStepper';
import { autoPlay } from 'react-swipeable-views-utils';
const logo = require('../../images/logo.svg');
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
const tutorialSteps = [
{
label: 'A first label',
description: 'This is the first item on the label',
imgPath:
'https://images.unsplash.com/photo-1537944434965-cf4679d1a598?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'A second label',
description: 'This is the second item on the label',
imgPath:
'https://images.unsplash.com/photo-1538032746644-0212e812a9e7?auto=format&fit=crop&w=400&h=250&q=60',
},
{
label: 'A third label',import * as React from 'react';
import { View } from 'react-native';
import SwipeableViews from '../../packages/react-swipeable-views-native/src';
import { autoPlay } from 'react-swipeable-views-utils';
import Pagination from '../pagination/Pagination';
import { Title } from 'react-native-paper';
import styles from '../styles';
const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
class DemoAutoPlay extends React.Component<{}, {index: number}> {
static title = "Auto play";
static description = "With the auto play HOC";
state = {
index: 0,
};
handleChangeIndex = index => {
this.setState({
index,
});
};
render() {react-swipeable-views-utils
react-swipeable-views utility modules
