diff --git a/examples/with-react-multi-carousel/README.md b/examples/with-react-multi-carousel/README.md index 4f362f533be96..44bb7f9f28b35 100644 --- a/examples/with-react-multi-carousel/README.md +++ b/examples/with-react-multi-carousel/README.md @@ -8,8 +8,6 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu [![Deploy with Vercel](https://vercel.com/button)](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. diff --git a/examples/with-react-multi-carousel/components/image.js b/examples/with-react-multi-carousel/components/image.js deleted file mode 100644 index e2e7e5d7e96be..0000000000000 --- a/examples/with-react-multi-carousel/components/image.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -const Image = ({ url, alt }) => ( - {alt} -) - -export default Image diff --git a/examples/with-react-multi-carousel/package.json b/examples/with-react-multi-carousel/package.json index 4ee0bd2965a3e..3b6714c737f95 100644 --- a/examples/with-react-multi-carousel/package.json +++ b/examples/with-react-multi-carousel/package.json @@ -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" } } diff --git a/examples/with-react-multi-carousel/pages/_app.js b/examples/with-react-multi-carousel/pages/_app.js deleted file mode 100644 index 7b44168f134c2..0000000000000 --- a/examples/with-react-multi-carousel/pages/_app.js +++ /dev/null @@ -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 ( - <> - - react-multi-carousel - - - - - - - - - ) - } -} - -export default MyApp diff --git a/examples/with-react-multi-carousel/pages/index.js b/examples/with-react-multi-carousel/pages/index.js deleted file mode 100644 index c01bd7f49fbff..0000000000000 --- a/examples/with-react-multi-carousel/pages/index.js +++ /dev/null @@ -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 ( -
- - {images.map((image) => { - return {image} - })} - -
- ) - } -} - -export default withStyles(styles)(Index) diff --git a/examples/with-react-multi-carousel/pages/index.tsx b/examples/with-react-multi-carousel/pages/index.tsx new file mode 100644 index 0000000000000..d2d3a6d6c48df --- /dev/null +++ b/examples/with-react-multi-carousel/pages/index.tsx @@ -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 ( + + Gundam + Musgo + Valley + Beach + Torii + + ) +} diff --git a/examples/with-react-multi-carousel/public/brucetang.jpg b/examples/with-react-multi-carousel/public/brucetang.jpg new file mode 100644 index 0000000000000..02d0402941608 Binary files /dev/null and b/examples/with-react-multi-carousel/public/brucetang.jpg differ diff --git a/examples/with-react-multi-carousel/public/cameronsmith.jpg b/examples/with-react-multi-carousel/public/cameronsmith.jpg new file mode 100644 index 0000000000000..dc4e44557362a Binary files /dev/null and b/examples/with-react-multi-carousel/public/cameronsmith.jpg differ diff --git a/examples/with-react-multi-carousel/public/favicon.ico b/examples/with-react-multi-carousel/public/favicon.ico new file mode 100644 index 0000000000000..718d6fea4835e Binary files /dev/null and b/examples/with-react-multi-carousel/public/favicon.ico differ diff --git a/examples/with-react-multi-carousel/public/ganapathykumar.jpg b/examples/with-react-multi-carousel/public/ganapathykumar.jpg new file mode 100644 index 0000000000000..a6b8a887fea87 Binary files /dev/null and b/examples/with-react-multi-carousel/public/ganapathykumar.jpg differ diff --git a/examples/with-react-multi-carousel/public/roanlavery.jpg b/examples/with-react-multi-carousel/public/roanlavery.jpg new file mode 100644 index 0000000000000..88ff85176328f Binary files /dev/null and b/examples/with-react-multi-carousel/public/roanlavery.jpg differ diff --git a/examples/with-react-multi-carousel/public/tianshuliu.jpg b/examples/with-react-multi-carousel/public/tianshuliu.jpg new file mode 100644 index 0000000000000..1456393654c0c Binary files /dev/null and b/examples/with-react-multi-carousel/public/tianshuliu.jpg differ diff --git a/examples/with-react-multi-carousel/src/getPageContext.js b/examples/with-react-multi-carousel/src/getPageContext.js deleted file mode 100644 index 9d99d2f2fad5c..0000000000000 --- a/examples/with-react-multi-carousel/src/getPageContext.js +++ /dev/null @@ -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 -} diff --git a/examples/with-react-multi-carousel/style.css b/examples/with-react-multi-carousel/style.css deleted file mode 100644 index 23d881429c32f..0000000000000 --- a/examples/with-react-multi-carousel/style.css +++ /dev/null @@ -1,11 +0,0 @@ -.image-item { - padding: 10px; -} -.container-with-dots { - margin-top: 20px; - padding-bottom: 10px; -} -#__next { - overflow: scroll; - margin-bottom: 40px; -} diff --git a/examples/with-react-multi-carousel/tsconfig.json b/examples/with-react-multi-carousel/tsconfig.json new file mode 100644 index 0000000000000..99710e857874f --- /dev/null +++ b/examples/with-react-multi-carousel/tsconfig.json @@ -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"] +}