Skip to content

Commit

Permalink
Update with-react-multi-carousel example to use GSSP (#11069)
Browse files Browse the repository at this point in the history
  • Loading branch information
@john015
john015 committed Mar 17, 2020
1 parent 3e1ace3 commit 22e3b93
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 70 deletions.
6 changes: 3 additions & 3 deletions examples/with-react-multi-carousel/package.json
View file
Expand Up @@ -15,9 +15,9 @@
"@material-ui/icons": "^3.0.2",
"jss": "^9.8.7",
"mobile-detect": "^1.4.3",
"next": "^9.1.8-canary.11",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"next": "^9.3.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-jss": "^8.6.1",
"react-multi-carousel": "^1.2.5"
}
Expand Down
131 changes: 64 additions & 67 deletions examples/with-react-multi-carousel/pages/index.js
View file
Expand Up @@ -5,7 +5,7 @@ import Carousel from 'react-multi-carousel'

import Image from '../components/image'

const styles = theme => ({
const styles = () => ({
root: {
textAlign: 'center',
},
Expand All @@ -16,73 +16,70 @@ const styles = theme => ({
},
})

class Index extends React.Component {
static getInitialProps({ req, isServer }) {
let userAgent
let deviceType
if (req) {
userAgent = req.headers['user-agent']
} else {
userAgent = navigator.userAgent
}
const md = new MobileDetect(userAgent)
if (md.tablet()) {
deviceType = 'tablet'
} else if (md.mobile()) {
deviceType = 'mobile'
} else {
deviceType = 'desktop'
}
return { deviceType }
const images = [
'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550223640-23097fc71cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550353175-a3611868086b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550330039-a54e15ed9d33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549833284-6a7df91c1f65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
]

const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
}

function Index({ classes, deviceType }) {
return (
<div className={classes.root}>
<Carousel
responsive={responsive}
ssr
showDots={false}
slidesToSlide={1}
infinite
containerClass="container-with-dots"
itemClass="image-item"
deviceType={deviceType}
>
{images.map((image, index) => {
return <Image url={image} alt={image} key={index} />
})}
</Carousel>
</div>
)
}

export async function getServerSideProps({ req }) {
let deviceType = null
const userAgent = req.headers['user-agent']
const md = new MobileDetect(userAgent)
if (md.tablet()) {
deviceType = 'tablet'
} else if (md.mobile()) {
deviceType = 'mobile'
} else {
deviceType = 'desktop'
}
render() {
const { classes } = this.props
const images = [
'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550223640-23097fc71cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550353175-a3611868086b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550330039-a54e15ed9d33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549833284-6a7df91c1f65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
]
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
}
return (
<div className={classes.root}>
<Carousel
responsive={responsive}
ssr
showDots={false}
slidesToSlide={1}
infinite
containerClass="container-with-dots"
itemClass="image-item"
deviceType={this.props.deviceType}
>
{images.map(image => {
return <Image url={image} alt={image} />
})}
</Carousel>
</div>
)
return {
props: { deviceType },
}
}

Expand Down

0 comments on commit 22e3b93

Please sign in to comment.