chore(examples): updated react-multi-carousel to TS (#37930)
### Example - Moved to typescript - Making use of the Image API (old example only use image tag) ### Dependencies - updated deps to latest - removed unused deps, just to focus on the current example and not other ones ``` @material-ui/core, @material-ui/icons, jss, mobile-detect, react-jss ``` ### Deploy [Example deploy](https://rmcexample-86mr9qpaa-falsepopsky.vercel.app/) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Balázs Orbán <info@balazsorban.com>
This commit is contained in:
rodrigo
GitHub
parent
b85bbac338
commit
e0c3d28679
15 changed files with 100 additions and 209 deletions
|
|
@ -8,8 +8,6 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
|
|||
|
||||
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-react-multi-carousel&project-name=with-react-multi-carousel&repository-name=with-react-multi-carousel)
|
||||
|
||||
_Live Example: https://react-multi-carousel.vercel.app_
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
|
@ -32,7 +30,3 @@ Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&ut
|
|||
|
||||
- On the server-side, we detect the user's device to decide how many items we are showing and then using flex-basis to assign \* width to the carousel item.
|
||||
- On the client-side, old fashion getting width of the container and assign the average of it to each carousel item.
|
||||
|
||||
The UI part of this example is copy paste from for the sake of simplicity. [with-material-ui](https://github.com/vercel/next.js/tree/canary/examples/with-material-ui)
|
||||
|
||||
Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
const Image = ({ url, alt }) => (
|
||||
<img
|
||||
draggable={false}
|
||||
style={{ width: '100%', height: '100%', position: 'relative' }}
|
||||
src={url}
|
||||
alt={alt}
|
||||
/>
|
||||
)
|
||||
|
||||
export default Image
|
||||
|
|
@ -6,14 +6,15 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.9.2",
|
||||
"@material-ui/icons": "^3.0.2",
|
||||
"jss": "^9.8.7",
|
||||
"mobile-detect": "^1.4.3",
|
||||
"next": "^9.3.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-jss": "^8.6.1",
|
||||
"react-multi-carousel": "^1.2.5"
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-multi-carousel": "^2.8.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.0.0",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"typescript": "^4.7.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
/*
|
||||
This is copy paste from the with-material-ui example.
|
||||
*/
|
||||
import App from 'next/app'
|
||||
import Head from 'next/head'
|
||||
import { MuiThemeProvider } from '@material-ui/core/styles'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import JssProvider from 'react-jss/lib/JssProvider'
|
||||
import getPageContext from '../src/getPageContext'
|
||||
|
||||
// Add global styles
|
||||
import '../style.css'
|
||||
import 'react-multi-carousel/lib/styles.css'
|
||||
|
||||
class MyApp extends App {
|
||||
constructor() {
|
||||
super()
|
||||
this.pageContext = getPageContext()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { Component, pageProps } = this.props
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>react-multi-carousel</title>
|
||||
</Head>
|
||||
<JssProvider
|
||||
registry={this.pageContext.sheetsRegistry}
|
||||
generateClassName={this.pageContext.generateClassName}
|
||||
>
|
||||
<MuiThemeProvider
|
||||
theme={this.pageContext.theme}
|
||||
sheetsManager={this.pageContext.sheetsManager}
|
||||
>
|
||||
<CssBaseline />
|
||||
<Component pageContext={this.pageContext} {...pageProps} />
|
||||
</MuiThemeProvider>
|
||||
</JssProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
import { Component } from 'react'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Carousel from 'react-multi-carousel'
|
||||
|
||||
import Image from '../components/image'
|
||||
|
||||
const styles = (theme) => ({
|
||||
root: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
title: {
|
||||
maxWidth: 400,
|
||||
margin: 'auto',
|
||||
marginTop: 10,
|
||||
},
|
||||
})
|
||||
|
||||
class Index extends Component {
|
||||
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={''}
|
||||
>
|
||||
{images.map((image) => {
|
||||
return <Image key={image} url={image} alt={image} />
|
||||
})}
|
||||
</Carousel>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Index)
|
||||
70
examples/with-react-multi-carousel/pages/index.tsx
Normal file
70
examples/with-react-multi-carousel/pages/index.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import Carousel from 'react-multi-carousel'
|
||||
import { ResponsiveType } from 'react-multi-carousel/lib/types'
|
||||
import 'react-multi-carousel/lib/styles.css'
|
||||
import Image from 'next/image'
|
||||
|
||||
const BreakpointSlides: ResponsiveType = {
|
||||
desktop: {
|
||||
breakpoint: { max: 3000, min: 1024 },
|
||||
items: 3,
|
||||
},
|
||||
tablet: {
|
||||
breakpoint: { max: 1024, min: 530 },
|
||||
items: 2,
|
||||
},
|
||||
mobile: {
|
||||
breakpoint: { max: 530, min: 0 },
|
||||
items: 1,
|
||||
},
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Carousel
|
||||
responsive={BreakpointSlides}
|
||||
ssr
|
||||
infinite
|
||||
itemClass="carousel-item"
|
||||
autoPlay
|
||||
>
|
||||
<Image
|
||||
alt="Gundam"
|
||||
src="/brucetang.jpg"
|
||||
priority
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
<Image
|
||||
alt="Musgo"
|
||||
src="/cameronsmith.jpg"
|
||||
priority
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
<Image
|
||||
alt="Valley"
|
||||
src="/ganapathykumar.jpg"
|
||||
priority
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
<Image
|
||||
alt="Beach"
|
||||
src="/roanlavery.jpg"
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
<Image
|
||||
alt="Torii"
|
||||
src="/tianshuliu.jpg"
|
||||
layout="responsive"
|
||||
width={700}
|
||||
height={475}
|
||||
/>
|
||||
</Carousel>
|
||||
)
|
||||
}
|
||||
BIN
examples/with-react-multi-carousel/public/brucetang.jpg
Normal file
BIN
examples/with-react-multi-carousel/public/brucetang.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
examples/with-react-multi-carousel/public/cameronsmith.jpg
Normal file
BIN
examples/with-react-multi-carousel/public/cameronsmith.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
examples/with-react-multi-carousel/public/favicon.ico
Normal file
BIN
examples/with-react-multi-carousel/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
examples/with-react-multi-carousel/public/ganapathykumar.jpg
Normal file
BIN
examples/with-react-multi-carousel/public/ganapathykumar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
examples/with-react-multi-carousel/public/roanlavery.jpg
Normal file
BIN
examples/with-react-multi-carousel/public/roanlavery.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
examples/with-react-multi-carousel/public/tianshuliu.jpg
Normal file
BIN
examples/with-react-multi-carousel/public/tianshuliu.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
|
|
@ -1,56 +0,0 @@
|
|||
import { SheetsRegistry } from 'jss'
|
||||
import {
|
||||
createMuiTheme,
|
||||
createGenerateClassName,
|
||||
} from '@material-ui/core/styles'
|
||||
import purple from '@material-ui/core/colors/purple'
|
||||
import green from '@material-ui/core/colors/green'
|
||||
|
||||
// A theme with custom primary and secondary color.
|
||||
// It's optional.
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
light: purple[300],
|
||||
main: purple[500],
|
||||
dark: purple[700],
|
||||
},
|
||||
secondary: {
|
||||
light: green[300],
|
||||
main: green[500],
|
||||
dark: green[700],
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
})
|
||||
|
||||
function createPageContext() {
|
||||
return {
|
||||
theme,
|
||||
// This is needed in order to deduplicate the injection of CSS in the page.
|
||||
sheetsManager: new Map(),
|
||||
// This is needed in order to inject the critical CSS.
|
||||
sheetsRegistry: new SheetsRegistry(),
|
||||
// The standard class name generator.
|
||||
generateClassName: createGenerateClassName(),
|
||||
}
|
||||
}
|
||||
|
||||
let pageContext
|
||||
|
||||
export default function getPageContext() {
|
||||
// Make sure to create a new context for every server-side request so that data
|
||||
// isn't shared between connections (which would be bad).
|
||||
if (typeof window === 'undefined') {
|
||||
return createPageContext()
|
||||
}
|
||||
|
||||
// Reuse context on the client-side.
|
||||
if (!pageContext) {
|
||||
pageContext = createPageContext()
|
||||
}
|
||||
|
||||
return pageContext
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.image-item {
|
||||
padding: 10px;
|
||||
}
|
||||
.container-with-dots {
|
||||
margin-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#__next {
|
||||
overflow: scroll;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
20
examples/with-react-multi-carousel/tsconfig.json
Normal file
20
examples/with-react-multi-carousel/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in a new issue