archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-react-multi-carousel/README.md

39 lines
2.1 KiB
Markdown
Raw Normal View History

Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
# react-multi-carousel example
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template
2020-01-16 23:23:56 +01:00
[react-multi-carousel](https://www.npmjs.com/package/react-multi-carousel) is a React component that provides a Carousel that renders on the server-side that supports multiple items with no external dependency.
Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
docs: add 'Open in StackBlitz' buttons to various examples (#25853) This PR adds a `Preview` section and a `Open in StackBlitz` button to various examples. I have tested all examples and omitted the ones that require third party API keys, or didn't work. Some examples don't work locally either. Here's an example: ![image](https://user-images.githubusercontent.com/12571019/121027783-88971280-c7a7-11eb-851a-0ad30cf74b42.png) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [x] Examples updated - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes
2021-06-08 22:45:02 +02:00
## Preview
Preview the example live on [StackBlitz](http://stackblitz.com/):
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-react-multi-carousel)
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
## Deploy your own
Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
Include utm_source on example links to vercel.com (#21305)
2021-01-19 08:28:54 +01:00
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
2021-01-07 02:40:29 +01:00
[![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)
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
Update .now.sh to .vercel.app. (#22359)
2021-04-14 16:46:06 +02:00
_Live Example: https://react-multi-carousel.vercel.app_
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
## How to use
Update references to zeit/next.js (#13463)
2020-05-27 23:51:11 +02:00
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
```bash
Suggest `npx` over `npm init` (#13637) This updates old examples to the more universal `npx` command. Fixes https://github.com/vercel/next.js/discussions/12103
2020-06-01 19:36:57 +02:00
npx create-next-app --example with-react-multi-carousel with-react-multi-carousel-app
Add the deploy button to compatible examples (#9547)
2019-11-27 17:40:58 +01:00
# or
yarn create next-app --example with-react-multi-carousel with-react-multi-carousel-app
```
Fix deploy buttons URLs (#20834) Fix all deploy button URLs in the Next.js repo to follow the following format: ``` https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/<EXAMPLE_NAME>&project-name=<EXAMPLE_NAME>&repository-name=<EXAMPLE_NAME> ``` The detailed docs for the Deploy Button can be found here: https://vercel.com/docs/more/deploy-button. Also updates legacy Vercel import flow URLs (starting with vercel.com/import or with vercel.com/new/project), to use the new vercel.com/new URLs. --- For example, for the `hello-world` example: The URL is https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world And the deploy button looks like this: [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world&project-name=hello-world&repository-name=hello-world) --- For reference, I used the following regexes to search for the incorrect URLs ``` \(https://vercel.com/import/git\?s=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) \(https://vercel.com/import/git\?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/([^&]*)(.*)\) \(https://vercel.com/import/project\?template=https://github.com/vercel/next.js/tree/canary/examples/(.*)\) https://vercel.com/import/git https://vercel.com/import/select-scope https://vercel.com/import https://vercel.com/new/project ```
2021-01-07 02:40:29 +01:00
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
## How does it work with ssr?
Move syntax formatting to prettier (#7454) * Run prettier over packages/**/*.js * Run prettier over packages/**/*.ts * Run prettier over examples * Remove tslint * Run prettier over examples * Run prettier over all markdown files * Run prettier over json files
2019-05-29 13:57:26 +02:00
- 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.
Added example with react-multi-carousel for rendering items on the server-side (#6820) * Simplified format function in with-redux (#6518) * Update README.md (#6749) - fix runtime configuration example to use `customKey` - standardize warning callouts to use a block quote and bold "**Warning:**" text. Previously there were different ways a warning was mentioned on the docs page: - A warning emoji. The warning emoji didn't render in the actual site. <img width="770" alt="Screen Shot 2019-03-21 at 9 22 21 AM" src="https://user-images.githubusercontent.com/1103708/54759302-c655f380-4bbb-11e9-9116-b0fdc2467bc3.png"> - Italicized "Warning" text. Imo, does not stand out on the page. <img width="663" alt="Screen Shot 2019-03-21 at 9 24 43 AM" src="https://user-images.githubusercontent.com/1103708/54759376-f604fb80-4bbb-11e9-85c6-6589b7738dee.png"> * Adde example on how to rendering muiltiple items carousel on server-side with nextjs
2019-04-03 12:58:59 +02:00
Update references to zeit/next.js (#13463)
2020-05-27 23:51:11 +02:00
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)
Make example READMEs more consistent (#10124) * npx create → npm init * Fix inconsistent instructions * Update amp-first * Update with-graphql-react * with-firebase-cloud-messaging * Update with-higher-order-component * change create-next-app url * Update create-next-app instruction * Update instructions to use npm instead of npx * Move "the idea behind the example" to top * Rename * Rename * Update contributing.md with a README template
2020-01-16 23:23:56 +01:00
Source code is hosted on the [react-multi-carorusel](https://github.com/YIZHUANG/react-multi-carousel/tree/master/examples/ssr) repository.
Reference in a new issue Copy permalink