{"_id":"@adactiveasia/react-responsive-carousel","_rev":"1-740b741ef582f8c2ef6cf0bda718c87b","name":"@adactiveasia/react-responsive-carousel","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@adactiveasia/react-responsive-carousel","version":"0.0.1","description":"Adactive Asia implementatio of React Responsive Carousel","author":{"name":"Leandro Augusto Lemos","url":"http://leandrowd.github.io/"},"main":"lib/cjs/index.js","module":"lib/es/index.js","types":"lib/ts/index.d.ts","license":"MIT","keywords":["react","carousel","gallery","image-gallery","slider","responsive","swipe","mobile-friendly","react-component","view"],"repository":{"type":"git","url":"git+https://github.com/leandrowd/react-responsive-carousel.git"},"bugs":{"url":"https://github.com/leandrowd/react-responsive-carousel/issues"},"homepage":"http://leandrowd.github.io/react-responsive-carousel/","scripts":{"start":"parcel src/index.html src/assets/**/*","storybook":"start-storybook -p 9001 -s ./src -c .storybook","changelog":"auto-changelog --ignore-commit-pattern=\"(Merge pull request|Merge branch|Updating changelog|Prepare for publishing)\"","update-codesandbox":"cd codesandbox/default && yarn add react-responsive-carousel@latest","format":"prettier '**/*.{js,json}'","format:check":"yarn format --check","format:write":"yarn format --write","test":"yarn format:check && yarn typecheck && yarn jest && yarn jest-ssr","jest":"jest","jest-ssr":"jest --testEnvironment=node ./src/__tests__/SSR.tsx","typecheck":"tsc -p tsconfig.json --noEmit","update-snapshots":"jest --updateSnapshot","build":"yarn lib:build","lib:build":"yarn lib:build-cjs && yarn lib:build-es && yarn lib:build-styles && yarn lib:build-types","lib:build-cjs":"babel ./src -d lib/cjs --ignore './src/__tests__' --extensions '.ts,.tsx' --config-file ./babel.config.cjs.json","lib:build-es":"babel ./src -d lib/es --ignore './src/__tests__' --extensions '.ts,.tsx' --config-file ./babel.config.json","lib:build-styles":"mkdir -p lib/styles && node-sass src/carousel.scss > lib/styles/carousel.css && node-sass --output-style compressed src/carousel.scss > lib/styles/carousel.min.css","lib:build-types":"tsc -p tsconfig.types.json","lib:pre-publish":"npm version patch && git push origin master","lib:publish":"npm publish && git push --tags","lib:post-publish":"yarn changelog && yarn update-codesandbox && git add . && git commit -m 'Updating changelog and codesandbox' && git push origin master","lib:build-and-publish":"yarn lib:build && yarn lib:pre-publish && npm run lib:publish && yarn lib:post-publish","website:build":"parcel build ./src/index.html --out-dir temp/website","website:copy-assets":"cp -r ./src/assets temp/website/assets && cp -r ./CNAME temp/website/CNAME","website:storybook":"build-storybook -s ./src -o ./temp/website/storybook","website:deploy":"gh-pages -d temp/website","website:create-and-publish":"yarn website:build && yarn website:copy-assets && yarn website:storybook && yarn website:deploy","prepublish-to-npm":"git pull && yarn build && git add . && git commit -m 'Prepare for publishing'","publish-to-npm":"(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)","postpublish-to-npm":"yarn changelog && yarn update-codesandbox && git add . && git commit -m 'Updating changelog and codesandbox' && git push origin master","prepublish-prerelease-to-npm":"git pull && yarn build && git add . && git commit -m 'Prepare for publishing prerelease'","publish-prerelease-to-npm":"(git pull && npm version prerelease --preid=next && npm publish)"},"devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.9.0","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/preset-env":"^7.9.5","@babel/preset-react":"^7.9.4","@babel/preset-typescript":"^7.9.0","@kadira/react-storybook-addon-info":"^3.4.0","@kadira/storybook":"^2.35.3","@storybook/addon-actions":"^5.3.18","@storybook/addon-essentials":"^5.3.18","@storybook/addon-knobs":"^5.3.18","@storybook/addon-storysource":"^5.3.18","@storybook/addon-viewport":"^5.3.18","@storybook/react":"^5.3.18","@types/classnames":"^2.2.10","@types/enzyme":"^3.10.5","@types/jest":"^25.2.1","@types/react":"^16.9.34","@types/react-dom":"^16.9.6","@types/react-test-renderer":"^16.9.2","auto-changelog":"^1.10.2","babel-loader":"^8.1.0","css-loader":"^3.5.2","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.2","gh-pages":"^2.2.0","husky":"^3.0.9","jest-cli":"^25.3.0","node-sass":"^4.13.1","parcel-bundler":"^1.12.4","prettier":"^1.18.2","pretty-quick":"^2.0.0","react":"^16.9.0","react-dom":"^16.9.0","react-player":"^1.15.3","react-test-renderer":"^16.9.0","sass-loader":"^8.0.2","style-loader":"^1.1.3","typescript":"^3.8.3"},"dependencies":{"classnames":"^2.2.5","prop-types":"^15.5.8","react-easy-swipe":"^0.0.18"},"jest":{"unmockedModulePathPatterns":["node_modules"],"rootDir":"src","setupFilesAfterEnv":["../setupTests.js"]},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"auto-changelog":{"output":"CHANGELOG.md","template":"keepachangelog","unreleased":true,"commitLimit":true},"gitHead":"d9aed707dae374449dde76fcfff6c759b138870d","_id":"@adactiveasia/react-responsive-carousel@0.0.1","_nodeVersion":"8.17.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-5q/9uojyJ+iBf4RedzIfI7+8+XMCwTG1x8cPxdAawi30qMBvWkG5a1+1t+E00pq0YOJ+Y2pHuU2Rn/i2Tgcdzg==","shasum":"6c8947c481d1409bf13c8c8e8afeafd8376e2e7a","tarball":"https://registry.npmjs.org/@adactiveasia/react-responsive-carousel/-/react-responsive-carousel-0.0.1.tgz","fileCount":49,"unpackedSize":207496,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8y+ECRA9TVsSAnZWagAAqUoP/jDTVWvUh69ecAaHY+Nh\n+aKugZHAP1ibMIA2zbHyc7N94fEgGcK5TEckoYtqajVRm+eomJA9gkGKqY0r\nYugf1yYyl1RJdIjITu/Wx+zTt3IevVz9EbUUDNjZtvGaBqekQZJzRylwDete\nenaQIgbtGuoBRiF5YEX93w4ZyDsEuYqZlng4PEhmRO1zM085PuVOug2/YCIk\nA5s+DGlyNFP2zBOqIYGev4KTUrviChJYDy43K4lgo6ScGsSsUmCXSQmSW0jT\nPXMr9462w8NWYRITv7rhc3C5zkmSwML738SalVrdZ4RVuj2hai0thZst8IN3\nY5Gfl4zYk3oCkWVrgJKtBMBndWtDS0I2nBwbK8yGrpDksmVXm2Y5iHlIqAGx\nxK5K7laTnLu9AxUq61nCB8h6OQgx9i+IrVE8BW7x60sXf1J3S81+yMT+8b2K\n3f8dXeI9/eZiL7ZpWAxczLraao1NqRgk5oMzeoNr9M2J7oc2ZOPp8QewURCJ\nD9nD/E3jEfmuEjcHUh7xHqHAwMSQKTaYttsoX/rCETyS1y8/ADAdtDFjVK30\nOXP+VUbsgKwG0+Eq3vPNKlF7x9af8agNv03rhItOyBadmq9lA3qw+frNn6jj\n+HyI4ZLSgakHxRUgedeiXkqk3MaGT8YdGo3noRCAiaAC9/nJ/CKi9AqYTLND\nx8ba\r\n=7Zoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjJJvSzR7ed3BKLAb97hhhztiU9UdOoZv0nOPhr6VJtAiA0iQggnoI7LlcraqDZ5jwVkvd/74ljKboQGrYtcZKG6g=="}]},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"_npmUser":{"name":"devadactiveasia","email":"dev@adactive.asia"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-responsive-carousel_0.0.1_1592995716413_0.7005262242871653"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-24T10:48:36.207Z","0.0.1":"2020-06-24T10:48:36.553Z","modified":"2022-04-04T11:22:42.402Z"},"maintainers":[{"name":"devadactiveasia","email":"dev@adactive.asia"}],"description":"Adactive Asia implementatio of React Responsive Carousel","homepage":"http://leandrowd.github.io/react-responsive-carousel/","keywords":["react","carousel","gallery","image-gallery","slider","responsive","swipe","mobile-friendly","react-component","view"],"repository":{"type":"git","url":"git+https://github.com/leandrowd/react-responsive-carousel.git"},"author":{"name":"Leandro Augusto Lemos","url":"http://leandrowd.github.io/"},"bugs":{"url":"https://github.com/leandrowd/react-responsive-carousel/issues"},"license":"MIT","readme":"# React Responsive Carousel\n\n[![npm version](https://badge.fury.io/js/react-responsive-carousel.svg)](https://badge.fury.io/js/react-responsive-carousel)\n[![Build Status](https://travis-ci.org/leandrowd/react-responsive-carousel.svg?branch=master)](https://travis-ci.org/leandrowd/react-responsive-carousel)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_shield)\n\nPowerful, lightweight and fully customizable carousel component for React apps.\n\n### Features\n\n-   Responsive\n-   Mobile friendly\n-   Swipe to slide\n-   Mouse emulating touch\n-   Server side rendering compatible\n-   Keyboard navigation\n-   Custom animation duration\n-   Auto play w/ custom interval\n-   Infinite loop\n-   Horizontal or Vertical directions\n-   Supports images, videos, text content or anything you want. Each direct child represents one slide!\n-   Supports external controls\n-   Highly customizable:\n    -   Custom thumbs\n    -   Custom arrows\n    -   Custom indicators\n    -   Custom status\n\n### Important links:\n\n-   [Codesandbox playground](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default)\n-   [Storybook](http://react-responsive-carousel.js.org/storybook/)\n-   [Changelog](https://github.com/leandrowd/react-responsive-carousel/blob/master/CHANGELOG.md)\n-   [Before contributing](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md)\n-   [Troubleshooting](https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md)\n\n### Demo\n\n<http://leandrowd.github.io/react-responsive-carousel/>\n\nCheck it out these [cool demos](http://react-responsive-carousel.js.org/storybook/index.html) created using [storybook](https://storybook.js.org/). The source code for each example is available [here](https://github.com/leandrowd/react-responsive-carousel/blob/master/stories/index.js)\n\nCustomize it yourself:\n\n-   Codesandbox: <https://codesandbox.io/s/lp602ljjj7>\n\n### Installing as a package\n\n`yarn add react-responsive-carousel`\n\n### Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport \"react-responsive-carousel/lib/styles/carousel.min.css\"; // requires a loader\nimport { Carousel } from 'react-responsive-carousel';\n\nclass DemoCarousel extends Component {\n    render() {\n        return (\n            <Carousel>\n                <div>\n                    <img src=\"assets/1.jpeg\" />\n                    <p className=\"legend\">Legend 1</p>\n                </div>\n                <div>\n                    <img src=\"assets/2.jpeg\" />\n                    <p className=\"legend\">Legend 2</p>\n                </div>\n                <div>\n                    <img src=\"assets/3.jpeg\" />\n                    <p className=\"legend\">Legend 3</p>\n                </div>\n            </Carousel>\n        );\n    }\n});\n\nReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));\n\n// Don't forget to include the css in your page\n\n// Using webpack or parcel with a style loader\n// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';\n\n// Using html tag:\n// <link rel=\"stylesheet\" href=\"<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css\"/>\n```\n\n### Customizing\n\n#### Items (Slides)\n\nBy default, each slide will be rendered as passed as children. If you need to customize them, use the prop `renderItem`.\n\n```\nrenderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;\n```\n\n#### Thumbs\n\nBy default, thumbs are generated extracting the images in each slide. If you don't have images on your slides or if you prefer a different thumbnail, use the method `renderThumbs` to return a new list of images to be used as thumbs.\n\n```\nrenderThumbs: (children: React.ReactChild[]) => React.ReactChild[]\n```\n\n#### Arrows\n\nBy default, simple arrows are rendered on each side. If you need to customize them and the css is not enough, use the `renderArrowPrev` and `renderArrowNext`. The click handler is passed as argument to the prop and needs to be added as click handler in the custom arrow.\n\n```\nrenderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;\nrenderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;\n```\n\n#### Indicators\n\nBy default, indicators will be rendered as those small little dots in the bottom part of the carousel. To customize them, use the `renderIndicator` prop.\n\n```\nrenderIndicator: (\n    clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,\n    isSelected: boolean,\n    index: number,\n    label: string\n) => React.ReactNode;\n```\n\n#### Take full control of the carousel\n\nIf none of the previous options are enough, you can build your own controls for the carousel. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--with-external-controls\n\n### Videos\n\nIf your carousel is about videos, keep in mind that it's up to you to control which videos will play. Using the `renderItem` prop, you will get information saying if the slide is selected or not and can use that to change the video state. Only play videos on selected slides to avoid issues. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--youtube-autoplay-with-custom-thumbs\n\n=======================\n\n### Contributing\n\nThe [contributing guide](https://github.com/leandrowd/react-responsive-carousel/blob/master/CONTRIBUTING.md) contains details on how to create pull requests and setup your dev environment. Please read it before contributing!\n\n=======================\n\n### Raising issues\n\nWhen raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.\n\n-   A new option is to create an example with the code that causes the bug. Fork this [example from codesandbox](https://codesandbox.io/s/github/leandrowd/react-responsive-carousel/tree/master/codesandbox/default) and add your code there. Don't forget to fork, save and add the link for the example to the issue.\n\n=======================\n\n## License\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_large)\n\n```\n\n```\n","readmeFilename":"README.md"}