{"_id":"react-material-ui-carousel","_rev":"93-15b9a20bd1f3c47c3c918510deaec984","name":"react-material-ui-carousel","dist-tags":{"latest":"3.4.2","alpha":"3.3.3","version2":"2.3.11","version2mui5":"2.3.10-mui5"},"versions":{"0.1.0":{"name":"react-material-ui-carousel","version":"0.1.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","homepage":"https://learus.github.io/react-material-ui-carousel","dependencies":{},"devDependencies":{"@babel/core":"7.6.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","auto-bind":"^2.1.1","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"2fec8b82af32f47404ca54bdeaecacd605926e2a","description":"This project was bootstrapped with [Create React Library](https://github.com/udilia/create-react-library).","_id":"react-material-ui-carousel@0.1.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-hsEoixJgLg0/RqkjifJiyODUoi335ZNkKm2fcBZuZa0al8KLSTijR/jbQGvcqFYy93zyzY9UamUp1Terx+wr9g==","shasum":"3cf066df6872d4ce0a7be9d98ddc1d0ebe9f4e16","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.1.0.tgz","fileCount":2,"unpackedSize":6576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpbjUCRA9TVsSAnZWagAAjtMP/2a4x4ggJbMZMNoAVBud\nv6Y1koLwn16ome5VIMlBqbMuAyGHMyiHGfFAft8k5kPTO/U83PkSrgA+Z/VG\n9h5JMn+Y9PiPdk0AC7dba4tzzYjfhLAAMAAj6aBFfrAiSjcMLT4+lB8gQG3k\ns47nr0yAsxYdvFPzpvh4rsIGufdsJmGae7IX5mh/qveEazBNBdugX+40BCol\nMK1FMyPaQH64yxam2Dy0dEpuPRFONgA1+myesxBwCnszh+4HKoWND9IBgeUD\nvWM86oki3Nb3Wgy+pWn+ayQ4/g4w8rXFA6EuNUWzFKaP4LVjNcZ85NaqdZgF\nZdE80B2bBSdSIxquoBqTHGq3Sq4RS+ZGYn9A+AF9foGwnf2wwd+2bzGkxQeQ\nUAF/BPGDrDfNeRrg3ks3lOO3l03JlzrMWJmKa/NkV2I5rUpWqI8348/hlHUg\nkbYbJMEvgYuasmovDlP9G0aAd4XDmLPEcBBuyUZaV4WVIZAxHaKQK3NrZ0E0\ncLcGNwQH62dIqkHivbbSzn1aBEvVs9RXl0h6v8D+jXmlYBZ+P4Ctdjp5++Au\nK2HInPquIhQadZIxOtoA+83W6znsx/z5UHNz0Y5Kw3q73eNmTs2Dstpoao3Z\nXBaD8jvku7uoGygRcRHA06eC603SAo+7heOTEHbu1sgCFa0befWzKLrmiC8z\n9aGL\r\n=ZeRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKMmQFom8LwnN38Wtc50DVIvbzf3+rMVK+YYvaYkIOGwIgFYXHWQKd/8djJovVni1qOaoFJ8Dl9OJp62XqoaQbq4k="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.1.0_1571141844052_0.12507445593591626"},"_hasShrinkwrap":false},"0.2.0":{"name":"react-material-ui-carousel","version":"0.2.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://github.com/Learus/react-material-ui-carousel","dependencies":{},"devDependencies":{"@babel/core":"7.6.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","auto-bind":"^2.1.1","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"9dea01fe5418b23247ecc0761ccf7953ff63eebb","_id":"react-material-ui-carousel@0.2.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-GtAmK2tz+pNg9npg6EGMwiD3twfN8KdDXwDjSxwMmqPyNsEytdMPK12OOkJW5rL1GrD20nVpH9zZjrhOYMCSBw==","shasum":"f422f96f6cc5fa8844b6df2c214061d24ad6c4b3","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.2.0.tgz","fileCount":2,"unpackedSize":6670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpb0FCRA9TVsSAnZWagAANTUP/Rg1S/Di4JPf/Z5PO3Z2\nehY/R/FrVAuGwq/67ls3X+bkT1zHTEqjRS4FrjwBT55mP5vInnDgWDlqYCvd\nSIXtbB8nBp5R2Qk47VPuwHJr6eGuiWcEA5JOCV7w9D/13I9szT1ljrSOTIU4\nK3Bxc6fJuwoQ1zLPv8bn1DWwOu2KTIwj4DrPdkQnBwYmNVIfsOyjoK8Imxpl\nr/msAVFKnWVVN9L+z8eLbFhEEMLNvGUQc2KI2ZmG199OBQZpl3CUKJgoTa/p\n0fEcFJyDveOh1nmlco6eFbcb+EO0nTLB3vNADE1hFf+XSZPbHNG5ZnEB8+/S\nZpcIsugLxsi7HJX3VWw0gc2EW2Ekx8sfyR+JkPB/SDni2hXyLxfGwJrpiQ8E\nbHuvvEbN5furwi3g7253rJZ69oLzXXjMn0c9kbMH3wH6Nk+91rwnS1A2PRqp\n5VB5s27tuMnML6NVs9Zmkh4bQnttyNOnEW2MrUftff6s362IgK6Xbpw0R3K+\nJPuoZNIPwJcqn4UdTGfWXyxxNoorptO1HqACzqKwogFGFlKE2kbh61WzuSyR\nyxPDPeOHOhzWOS2MigqlVeuPzbH8B1j7ItdBC8CVARefKXa2bNSQVz7SPwH4\n3EocjMdLGLqFRl0KmdJGVAc9mLk361Lvt44c19phkqsqBr0G98Uzx4jrucDF\nCJu7\r\n=bCLa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCteaKhwGKqTQ8fxaH8yoWFjyoG+S7Zznx2eHMzj4zfhgIgZgxQvQgQ8N/6WosGX18lGEKD0ULBWzeCXXwlxUdBOXU="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.2.0_1571142916752_0.3873056296944981"},"_hasShrinkwrap":false},"0.3.0":{"name":"react-material-ui-carousel","version":"0.3.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"dependencies":{},"devDependencies":{"@babel/core":"7.6.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","auto-bind":"^2.1.1","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"eef16a8a195ace2b5a13b6b6957394f8fcc6cf4b","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.3.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-bHUb5aN+KPqiY1vlv93gy6H1uXljKpv11BLaBkGrubSLnR27yAj1qzS4Fg1yBmaHJpRrjW5ptZBJZb0yInnYrQ==","shasum":"aaf634f395e8bacd501f8c53c1ec964094c1cfb7","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.3.0.tgz","fileCount":2,"unpackedSize":6739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpcC5CRA9TVsSAnZWagAA8f8P/0UizEsyOwQNkDLLyYba\n5Hzc/3+nyC8fwpqHhYiyzr8hA8OpprkhxL/3XrYC1fZAgM4/Lpkwo4Hf20Us\nCxdKLSiwBcIEkKI/oaYeGzYk+LtG+An2hpe+tGMSmzGFa57y/S3NWbR2gp2G\nDDFD8ayHLZ83mSqaQzGKiYyw8imy2Odj+TFeyYsqZm+9o/KjtS5yrVlDa8nI\n4jzqMi+ivOzyD5pjD9DviP/lbj/SpGu4bX5/uXR+dDILTMBLb6h6PWjjvJni\nI2DEpwpbBjf6m/7ZIsL7srBqjWYOa8TrY7qjMo0WypDFSc+wxXs1C04gXtlR\nnO2i4VqdD428r+aj3MXIcCvW8UvcSUKjTOOhHizT8NBLakiOBajTr62iZjux\nZtkJycbf2+GUrCXbUdriQonV8HcaVLzGRw5x+7CICocMFMP7IWxbza+LLwlV\nzJ2lDNuz8EfQ5SK8W9KCV66kb/x5OfFRirC2vjoFJHegynqvbkfPyITrEJjB\ndRwmP5SkCjee0PuhrLW8gY/1YBN8JbDZTFhlhWDZjYK+LafVl64WghL+B/Oj\nPIEa3cmL3U0rrAqv/q6UYJkyAmYR4RxJOmwX7XDOemWMsNLu82JrFGsV+uUK\nqvEvIUwa7e3cpoZcTA829HQp1zzC2r8rrbSDEZUflhA7AePC+KzureawbyVN\noVyH\r\n=tPIs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQe0byBMBW8gNn1yRL0+wjAzBPqKPl1YtA8wjEWkKQ9AIgAM7OD4sqaGFVaaaAv7CAZtyZQkhrtw8BLW3Pir/uGxI="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.3.0_1571143864635_0.5003991705458477"},"_hasShrinkwrap":false},"0.4.0":{"name":"react-material-ui-carousel","version":"0.4.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"dependencies":{},"devDependencies":{"@babel/core":"7.6.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","auto-bind":"^2.1.1","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"824f1474869c61bf84f09b6a7d83461272f9c0ae","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.4.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-y/KtJZWsQxdn2YQCq+auQ5XIB3gJVa8BdOiDlkMTw33580GkjG+IsmIKA6ji2sQepis0sc7fysIn1v5mNUD1dg==","shasum":"39d2685208926a00a586a84be01621e1dd1b85ee","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.4.0.tgz","fileCount":8,"unpackedSize":524185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpcdzCRA9TVsSAnZWagAA440P/jUHKLigAEQQQP2plCI2\ngH62QS6Mf7l8GHISU8pCGIzZ9243XZ8bick8SFlJ5vTB9zd1TwywIobIuTnv\nX7q1BUqp81jlYwJ22uFtUX0dyKLa+XSEwB8eVcTmtE1ZdyuVJgsquhpMwaoW\nzM7Jf2FYxuj0AX5nmI9pOMC+EiNApv0WVvqBMEKVj5dNGSwcsrKqUnIk7b3h\nKPWJh1BUhPCV093Zeb2EE+e82fVqLltW/6PFjIU5vwfHxYN2cp33w6CfAajM\nDa3pvD3wzT/P+WxSfnqmm4+GiR1JmuTK78guqDWF61pmHX9xmFbWBey2CmY4\nQWT4Zb89drJl+oiDNUaXJvCqA7bkcSYz8FersnXOTnLnSviiw1YcA3adnu93\n4Uox9u6AHoIcRjZ0OgQ7LW+v9pVIO1SlsEYWN0yG7iLp5SjTyfm4LZNRvzCJ\nqeT2j2eosDR4/AJ85zMdX8yUxeDFIdJkP/dWWxHvg+XaAUEZYW7HpWLrw5Bd\nMteuynRiGhtLXG6mDwU28TFVj3neV7PjPf/3Oglz5+Y+fLP1MmCTkUeOWphB\nU/li6Yi/9BONTBv53DxdOU/8riZBg76vjDH8JjF0GDS4UXLm7xnunbIq1QNk\nDHnFRKwptU34sArOykk3nxGQoZ26IZ/5LTrWSYx84susa4qurRAssN6iwZ5I\n2mcR\r\n=gaoY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLlycNRHpAAhbX3vvdzBBCf7XXGfxG9Ofcvfso+bl1DAiBWYod3yd+sqc80iustOEuQhhlFp/sOzojemQ11tsTvOQ=="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.4.0_1571145587240_0.2892010862100347"},"_hasShrinkwrap":false},"0.5.0":{"name":"react-material-ui-carousel","version":"0.5.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"dependencies":{},"devDependencies":{"@babel/core":"7.6.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","auto-bind":"^2.1.1","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","node-sass":"^4.12.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"729fcd9724641a6fa1da096bc095d07485110c34","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.5.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-AeaXzhCbZRYM77mkHpTOl8b/OGve+3M8E9SbHQxCAbwf8CLrAy7vIIyZZO1oRxqI2sleqlOHzKMXAgiCf5+UVA==","shasum":"4efa2ab209dba7b9e962f6a3d6e7260c3c8cc256","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.5.0.tgz","fileCount":8,"unpackedSize":524185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpcwtCRA9TVsSAnZWagAArkYQAJJQQhl3nfYQSZ0g7pEP\nX6ZwbIlj05vOMJHDyTSyQtzsgbycJC/LO4WZpQX8om6y501uSlcP2rGzKcpT\nuL0s0zSewaW8rQTveqSZBt5mS+CYzkVkKqaEeS9NPO1S/38iXQahh6cwX2jn\nSm9U1jZrNRdBFWqoNll7P8lP+YPenFqhpIeteZoQG6O7jZJuHv6tKouwbU3R\n8+N1cFlRtnkpqldLsYnQ0gM0gm1VNcWl3Vf+AZgRmOVgNj4uejT0/awhCjuV\n1RwOtR9uuz3o0w+egT6oPreuQ6zGrTPuh77NqfnQ4KtXovnMsavmG65huE+W\nDpbiFK7e09R5qT9s8kDo+21aHETpwUZRYLjAaTODYKtI/azSLlmY0CezIxSB\nuC5zOcpHeYL18b/l+U1boVWmyji3/GdRbIEfUg/1rGfJ2igkuGtQwjn8SAwy\nTxzmboSnpGf3yZu/0GqZfPcTltf8UEc8abNI+s1iS+7lXUHi8XoKuo7bmyKL\nGoSNpFkBpyYkRNbOCzdRpup3I82csvN/Kd9P3ESTY/Zu/WBoJseq+BMC6HaL\n94qnFT38UfUd5H7651qEPxorL3lyFIF2oaSIqNzA1qnpXhi8/ueXbjRt/ZlT\ncWQRvzEjtBkTeAVErnnI/T0lYwxPvRFvMvSrbVfY7fPXQlW7gxtznE4cLmeO\n2YSU\r\n=GGhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLfuoHSz8WhBK1czsnjpt2iqKYZtQUEjth/BGkTnJ9pAiB+durbxKp8E8jcBprnCvRLdY5azmqd7tdLpQwG+pqlPw=="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.5.0_1571146796579_0.674189353288069"},"_hasShrinkwrap":false},"0.6.0":{"name":"react-material-ui-carousel","version":"0.6.0","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"devDependencies":{"@babel/core":"7.6.0","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"729fcd9724641a6fa1da096bc095d07485110c34","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.6.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Yai4V877GzLBC8D4VLGhhCJ7eVPeQSb1wGdlTZRE2/DrklcEFlySp2P97D6mAPWMv+kr6dvA/Z0XJ6gyngk2sw==","shasum":"c2339976884aa8ffa03141747298068a75a12827","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.6.0.tgz","fileCount":8,"unpackedSize":524233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpc20CRA9TVsSAnZWagAAHFgQAJz5kvjVHR95TJB8tFii\n+FUrUc7iOidYxhn+KgKOkq6PPFTGpNQx9tC2KZ17svPDuynzi4s6scfBihXs\n7REDGkjof8vl1WdUo2fcU5JHWr9Ekccwh/BpV+4QK/SjDdDs2NeR04iI1SNp\nZ5ui/H2QVvsU5gEnw1QM1f3oLzBq0QsHA5r2KaSI7Z0rxx/JilQSgJyyQWTl\n1BuJD4WVPcHSRIG2Z/PRhFbB8DkuhpqS6pBhS7X2mYUNgutcu4/ew5DQResd\nBXUnGMUZ1FR/aNvYh686cMat2BNSPdcmwmHS73YEsJG0WmCKszYW116amWd+\nXq5JJnfV/x0u+ex/xilexR/7/gTxkhmUB3ZGA7QY0xY/eY1/hZz5lKzboxL1\nT4xlUPLMlMo5WkutUZJYkakP5Fqk45Ufr2LHxnsYWBVHCIc9lzmAzQ+LDCti\npK3P6cDaKxzSyNwGsF69d7TMNwwdAGt+1rtZtwQ4FsoBik9vOa5q0w7E5K8L\nZZvFqW9ZlA5W6FBFNfP/jmxZ3GqEpWrwjQY16i5Nm2QcsMHQM0MlcS4uBkNR\nUeh1+VkN1VektJv91BEkKErNUJccNiKudFoqaV1fBR7iFu1AmVc7kLgqiP52\npcNfit5G18ATRWa02gttvxwIt9Jx22N4UWmu2ihQlVk5sXxig7lnayycbh1I\nsBsH\r\n=T4iM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA3hsUmVzdNQ25SZow/53LcR3a+Tqia5eXsOP2+64NyQIgdDW+disNXKPQN9+MxCiwGMaCbXL4V85F/kDQcvWroFs="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.6.0_1571147188007_0.00856558317855649"},"_hasShrinkwrap":false},"0.6.1":{"name":"react-material-ui-carousel","version":"0.6.1","main":"src/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"devDependencies":{"@babel/core":"7.6.0","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"729fcd9724641a6fa1da096bc095d07485110c34","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.6.1","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-ZNLMW1mLDHKRp60JkXiwZHL0udUEZwhTqRmqJvpRKpX8SG9WSKjUo+eRCCpiXthmtNV32HHEFfA09JYCb/QPfg==","shasum":"54c9ed9c9b613f101cb5a148841abb2851557ccf","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.6.1.tgz","fileCount":11,"unpackedSize":28168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpc+hCRA9TVsSAnZWagAAvaIP/1tgL3JuVhnQzJut/WEt\n0ii1G+PMGbYeiljIt8atzTnnRqx1rOMFKfratkLiqB3DnnA7Rj11O6k7mFsV\n77Zhf34z+WggkCaH/5ohfNq+ckUFnC8U8DFdVKW8LWByERdBDShjf3GzLBxg\nRXwXUValBlBdWCLp8ML96/+C7Qh64FdEX/rnW+nFFtaKsL6UtlM1MsuvASFw\nJH8tp/94ubAqZFdT5Jrjf63rMrLw1CkU9cOiUTCnXfjL3Qo4L8WjxubxEBW5\ngd+a7Mn9sXsBEA1sUFh3tvrQiLxa+OJ6tSE0rXBXfbYDg7Hkji/mUp54ft/t\n08QDmxCBVXEDx9KmpdfjqNdw2kvBo9LnV4cnyrpSU8bq0xNMoc4huAtnuS3O\nnkHztI8KelE41G17AVMzDHqyJLATJ3sTZzHh3IlFoT6aXMT4x36QAhAgcaac\nH0HWB3pyQ45x4IzYvr4fPZO5hoVTZTg1NovA3+MnOuiZtfhE/s3yjQSUauiK\n3lvJ5JdgTaa1j1KeIj/iyuW4WfNIMQwf8DwkDHmas01scYw3RnAXewnxazGu\nclqI1DpJfOlzZ5BpSfClJ6WMa2m4gme25HWVL1W4YE10WemQqgAtgFbaZ3dG\nsI8d1RPcYHTDdm3lLhrMZdllr3njFWp4DDZA5M14qslouC8PQg+cytpNKdxP\nWVqh\r\n=2WFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4LSstR8HrngxCRovjO45SeRB6eai+VC60AxAEYse3LAiBTaIK+AlGzxUqVhGBBzbZbwq2zhXHOmVd/QEoP3EOr2A=="}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.6.1_1571147681069_0.300605053471078"},"_hasShrinkwrap":false},"0.6.3":{"name":"react-material-ui-carousel","version":"0.6.3","main":"build/index.js","scripts":{"start":"node scripts/start.js","build":"node scripts/build.js","demo":"node scripts/demo.js","test":"node scripts/test.js","predeploy":"npm run demo","deploy":"gh-pages -d demo"},"license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"devDependencies":{"@babel/core":"7.6.0","@svgr/webpack":"4.3.2","@typescript-eslint/eslint-plugin":"^2.2.0","@typescript-eslint/parser":"^2.2.0","babel-eslint":"10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-named-asset-import":"^0.3.4","babel-preset-react-app":"^9.0.2","camelcase":"^5.2.0","case-sensitive-paths-webpack-plugin":"2.2.0","css-loader":"2.1.1","dotenv":"6.2.0","dotenv-expand":"5.1.0","eslint":"^6.1.0","eslint-config-react-app":"^5.0.2","eslint-loader":"3.0.2","eslint-plugin-flowtype":"3.13.0","eslint-plugin-import":"2.18.2","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^1.6.1","file-loader":"3.0.1","fs-extra":"7.0.1","gh-pages":"^2.1.1","html-webpack-plugin":"4.0.0-beta.5","identity-obj-proxy":"3.0.0","is-wsl":"^1.1.0","jest":"24.9.0","jest-environment-jsdom-fourteen":"0.1.0","jest-resolve":"24.9.0","jest-watch-typeahead":"0.4.0","mini-css-extract-plugin":"0.8.0","optimize-css-assets-webpack-plugin":"5.0.3","pnp-webpack-plugin":"1.5.0","postcss-flexbugs-fixes":"4.1.0","postcss-loader":"3.0.0","postcss-normalize":"7.0.1","postcss-preset-env":"6.7.0","postcss-safe-parser":"4.0.1","react":"^16.10.2","react-app-polyfill":"^1.0.4","react-dev-utils":"^9.1.0","react-dom":"^16.10.2","resolve":"1.12.0","resolve-url-loader":"3.1.0","sass-loader":"7.2.0","semver":"6.3.0","style-loader":"1.0.0","terser-webpack-plugin":"1.4.1","ts-pnp":"1.1.4","url-loader":"2.1.0","webpack":"4.41.0","webpack-dev-server":"3.2.1","webpack-manifest-plugin":"2.1.1","workbox-webpack-plugin":"4.3.1"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"jest":{"roots":["/src"],"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFiles":["react-app-polyfill/jsdom"],"setupFilesAfterEnv":[],"testMatch":["/src/**/__tests__/**/*.{js,jsx,ts,tsx}","/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],"testEnvironment":"jest-environment-jsdom-fourteen","transform":{"^.+\\.(js|jsx|ts|tsx)$":"/node_modules/babel-jest","^.+\\.css$":"/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)":"/config/jest/fileTransform.js"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"],"watchPlugins":["jest-watch-typeahead/filename","jest-watch-typeahead/testname"]},"babel":{"presets":["react-app"]},"gitHead":"729fcd9724641a6fa1da096bc095d07485110c34","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.6.3","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-IB0PDNABg9YRvl7s3+PcwT9Ag7V9poaQ7FLq1o/6hbi/vX3vtf2UrjjfjX+MYJ9orhW/t+YC1DjuEu9VqVoS+w==","shasum":"98c4161913d7ae6fba84f876c025c7962ac99ed1","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.6.3.tgz","fileCount":8,"unpackedSize":375454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpdmxCRA9TVsSAnZWagAAL4gP/3itBX9/CW0O0pgW7Ce0\nIKzo8VBNHOOE34tPNUX24JrvWkZIWmz07mX6rSYi4tQrad3GTnoACCsJvqwc\nWs+1sxeJZ91pCGNyr+Q9eHEmeQt6WKV7KGduJcXBbDsqSm7QvqNQPVKMhmx2\naexxjsJqk2b+nws2cYc1AXO6s81neLH8VJCjKrBEoGcUo0dOoijysGkiwY/p\nS8GAYRvC1CvQLmi00Mi9fACNqP+vruqtS8J24cl2TfLz3GB08Lm0X1vavfYU\nAejEbYE+IjM9nai0x5dMTaCyNZ7m5D6krcwmshQJm1MwdhPzPFBA9I2JhOGV\n1u806EEbHNY6GYNpaRcTnA6yzm7W6cjP1r4Rz/DP565+08QZOMmAHJHy+Bbz\ndeR0lL1wYE7BXVa6blqt+v8EHvCGwqgJ4lMOfbQWFOxtl6Ovi6AtXr7UZ047\nnpDkL9gjA1bvZDR/vPK2rz5nSkl6uu2mEUzQwKCmRuD8cdXI13GwWckDD/qF\nxQo598sKIpx6NTFBCGBPYwZZ+58LTkKE0My2h+9zPVOlcqwVhYvcC+p0472S\n9uGIpsN0UxqRlFMQswcrOSAuS6ZyX50mmj33Rii2wqtL41me6FpCbTP5Cjqz\nN+Yf/6cERslGzZk4KXjuR8f2k6ds0+2NkSbkEb+y8GkgdKByVXUnB6jR3Nap\ndopR\r\n=psLq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbY/2LZ/wcj/VveJ46zoPY0fRB4VOGsS4m3Ka/OI/BkgIhAPmB+gAd9OxyK15IBgw/PBU9IFbLrKfvT4x4ge4QQ4nr"}]},"maintainers":[{"name":"brewknight","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"brewknight","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.6.3_1571150256815_0.04077347267646858"},"_hasShrinkwrap":false},"0.7.0":{"name":"react-material-ui-carousel","version":"0.7.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","node-sass":"^4.12.0"},"gitHead":"d0e175789897386c69da25c5a5615cbca855ade9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.7.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-IP/ehj/+hs2XfpZL7jh/kzahIq1/p0unW/vB+Xwex13IdoZxy0bR7NjC8+ENd9i1P7HhO0yTIMiz1+Hqxyj/Vw==","shasum":"53dce2ac72ebc1bde4164bdc281c86bd18ae5a8a","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.7.0.tgz","fileCount":5,"unpackedSize":10940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp3nlCRA9TVsSAnZWagAANgAP/Ah9WK4qfxSeBoRVYy2b\nZvUXaYR7OBnM/xvZN1+bUXhjhj2T61k/l6ZRwAV1L6nybvWzDhkqE//miq9o\n7FdAo5Cqm+WxrmKh1P3oUClsSXJuXQ/iZbEOuKgxAebITae++zJnmqsxBM37\nWXhkK0BkkFtAZtgZTK8f2y8vkDrpTd99cApsyfBQwbFDZC+CujYEEDXCxcdY\nyXwm5r5182eFjZiLmWeOlCJJVJIBVnvRzN+9OlDx9hXvcrRoTx3prA7Klh09\nDZXyCBikEn8VtGfEQwl63D5m8icu/qpuqHOL5Xx4vEj5KqWn0HsJYUxLnpeM\nnevg/FG6zBG7E9PwgJ7VIwC/Tb8o5RBBsQBvhNd5RtFApjwTvl3PZ245P9dc\niXUxbQaeQt1/g0TdPJkNhHXf+y1lrPrIMtqB/8Qmms0LkJrvy51ioPbns1Iq\nCOrYGHBx8a9HKmys0e3wjEK1QylhOwXpi6wYIUK2uhNmlEpqoTEcanuXq4ZQ\nTu6xqvZimToTmSIiBtoq/H4vMyHpL71UKUXWbvTJqgFy76VxzPxHGPPwuyEI\nKwQjV42UNc3U4Sd6/EE3bpfC1KHiYa5rE2h9/mcL0F2kj20m7kyO7cfawZVi\nSBX5AkAEZhvwXsGAkweH6HMLBUZxJ+OEzhmZ0gFjEq1LXDdFoJN0TsFdZ9qI\n/Goy\r\n=D0FJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVsqq7JU3qXWyaK/nLSwkD0ktYeuc1aZJiDvbqnrZWpAiEAibMAPw3vBRQ3nuMpbkFd+pbrl+DMXQFIoE8ysPGGCNo="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.7.0_1571256804710_0.1033506368519519"},"_hasShrinkwrap":false},"0.7.1":{"name":"react-material-ui-carousel","version":"0.7.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","node-sass":"^4.12.0"},"gitHead":"d0e175789897386c69da25c5a5615cbca855ade9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.7.1","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-AK333ZbB+LXRNeVQ95nob1CQHLedg23WilskLAYM9FpHIPYR6hTghXb/Zp+RRZda2TQe119M3I0saqU+Ep/tWA==","shasum":"c7e98a7e0986649f082b9fc03832c7770830f5a3","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.7.1.tgz","fileCount":8,"unpackedSize":21786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp3vQCRA9TVsSAnZWagAA0MEP/itoTMP2cCsl3fgulM6f\n9l3MOmCrTArTQZs78f8nQbPngU8A0tYXlN8ydN+W5PE0qz/5f0MdalBSkgRB\nMjFcBaQOgU49UZRnDAJ0MrGI93bsvX7SEo7a3BikONC7pi5Tpto2WqEqM3VR\neE4TXC+uDATDpb1gMDo5BgNnJKbRU8lnQq4oP94kYxJgAvaGK5ZxZ5910/Ln\nM74e+squL7rdZLPyv1T095sSzLMnWARcByyucm1v8evIgKwbPs+PeA9j9/53\nEVOGZCwRPnblrtBEbWTXRNTE8qhsfJO1WgM41N2gotzvEyIJOgY3BBnYCBGI\ncS+jLz6nmuPKHMcVKMZoj6ht9T1ILcfEC7mhRr/ZUOyuj/SnmDbB4kIlK1xe\nSo9zqVFYmLLemIp9OEISTxA+fbwFxiou1hSGINn/q0VJKHPnmfSoHFIgFLQB\nSMAhBBf2CAnwMK38iYRX37rJqSAldc0c1v7OmIUT2fbZjAqfTV75Bq9w/p86\nDAQOg5ldfkvaBy2B5GJVv30WGZZ5zvrrElm5xHnmIvN7ddMduH8QBKRmeGhK\nMpdFEeTVYFNgVORlT/PpDYUzqcftiIcN+CNfmwR3VqKY7FH5uC9Tst2yl4Wj\ni4nQIE11+deA3foea6k5FKzpbcKcyDZzUysMTc4Wyn44Y5q2905Gi//XTM0p\n/BeY\r\n=JNtE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyk17bCq6YUeNNyghmxyirtsVcc+hQxeHF8bW7AsloAAIgISOTPIReJFQJZSAf0bG0NsVG5Rllq8vqxJP0k0aE3ko="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.7.1_1571257295034_0.8529207367602234"},"_hasShrinkwrap":false},"0.7.2":{"name":"react-material-ui-carousel","version":"0.7.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1"},"gitHead":"d0e175789897386c69da25c5a5615cbca855ade9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.7.2","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-1+Y18TtZ9BQYNUWHm6maxlgVGlcnJjZ8+r8CdrLHUaRVSQhsKxg7uXOXAKTnivJjRd2xhQmAVXybF/m85uD81A==","shasum":"7be0f9df01ca47c37bfa9ffc8a77255680f9f8be","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.7.2.tgz","fileCount":8,"unpackedSize":21786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp33NCRA9TVsSAnZWagAAm5EP/jmtZJWpmp9cBCT7vnnr\nqE0sjpO8CkIplINKpZLTdB4DbHjInzAuu63YBl0atxg1zKXILBX0oe+9T1KK\njEtlCwqRHhb9yfYZNWwNkNRwjBI4a37+KwPKQ3K0ZduRvprUy16dm7UHpgW3\nDawtyl3cYRN9i9R+lZH3jD1YXKIvPFQZj9EP8T6YKs7oXc0tq75FVDyVvnQd\nKQVZhT0R4vI8QsWqj56eM0oN11n5AtYEH+ELLby0faYDkP2Jig1Wg3b/+D27\nhEKWWLBCMYfSjVCXStJJvrTIu6zne2LA8TKMgUlUViMcYzsaRe5Fcn5XZ926\nbP1qEIwCHOSrXtMIaaITDL1uxSCLHSFSZxZUTK2NqESR2LhhantDdaK8kHYL\ngnHG28p2/OEl1Swun1DPf80pqosxMvOoAd3o8rdutBW98wGrI0QZzX1T/vjw\nr1V5rz3yz/cxoSnBoA97TpidLWiM5xu1t74SzFDOG2gkKkNOaAK4Bt9vGdBg\n9QWpgGX/DM8XCqZQ313bnJ+Xhj59zCvjDfsMP8nZ8RrK/QC6LGtjsZXiFYD5\njMyHIM1MMfaiQXz+lJSJO+JLNzqsaGA11fhgiv0foVO18X5HTvlgjTiwzO5F\nmdYadwC8fwypmPdFNx3TApFOItfzK4f75wz4ZU2iC0/lKXRbWYWcIM5nWUpJ\nNeQP\r\n=exyf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANnFX1gsR5KJiKP8A5w7hBpoLwhqgF+yhgtXlL5Yn1eAiBe/AWYQ8ic9qaKZClesj5aAds1qtRBBj/RaRUr9yNUaw=="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.7.2_1571257804542_0.9642564381575056"},"_hasShrinkwrap":false},"0.7.3":{"name":"react-material-ui-carousel","version":"0.7.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1"},"gitHead":"d0e175789897386c69da25c5a5615cbca855ade9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@0.7.3","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-mqkBWVCdM5Ofttj70bXbBZ4nF4ksl3I2I+niSSwyqpR6K9UNLpFNGGR/hb5scL5r8rcrk5YhBoFwKRoDSDeQew==","shasum":"38fd0d1a2e01bf1720be9d164d33a055512ac28d","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-0.7.3.tgz","fileCount":8,"unpackedSize":21786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp33kCRA9TVsSAnZWagAATKgQAJiO48TQqzgKq5dGUXxO\nNd1nw7zL6QlZMY8uxB1x/KPxH8H3wtB8KMNUtxbxrgEmq1y/HaKO8RLOxeRJ\nN8VAimND4l0cqwaaHIBJEgC1fEO4XMAjTfUzVIy514G03yhrLMfOyhMN5jDA\nG8e42aE8G4csT3IvxXTI08e5Xov0NqiPv8Ay0K1kJ8RxYc8LHSTsStPgbelR\n0iNZ+yMUV1NbhG4SPySNWO9s+e72nbB84Zcl32TpAHX6O70nGBWLuuah1lP2\nJmljE5TNRPuLnf2bTwo3eoRZFzTFYNMhff+LLobyszbj46zEbmxmZ3tQTxyP\nM8/x3sE/H1BOHxcLV6WkPX/vzhXAnO0gNV3ZvAOe3kS5xIvx2NAbwKwr4BK+\nbo3NLdwi+Qe3V5Q9TfG05qZgztnyXqhM8ES7bjzQWQ101Rzf9oDcDKtdZpC7\ncA0QLhoZsksC/e3RgI40ooGXMuz3QWDls3UHlBahz9cLO0qXRFioXDrF+KQT\ncL8jYEDg7VXiDAr61hTW/spSoAEGWp2/IWioAslNHmvC2hg5pxU8BU+UbrT/\nV+dsf7DI020aMaatEOYBWjubZ5TEPL8o2+ga8BalXZ9yAJJ5helumCsVtSNJ\nLsyPOZJeEkJ8Pna/EA13Ey/MJXGO4v89L5+bRS/RoeBr/7oTmQBVlVZ48s6f\nGniF\r\n=Nidr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUpT/wSKWTsNk2WYSru4XJvUSzxyHLBazIP1W1NMUFKgIgBSRbGcmWY3lC/1/2wk5Z+yaYlRlbmCZ2amRbU3Pef5Y="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_0.7.3_1571257828122_0.861819153973598"},"_hasShrinkwrap":false},"1.0.0":{"name":"react-material-ui-carousel","version":"1.0.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","test":"react-scripts test","predeploy":"npm run demo","deploy":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.1.1"},"gitHead":"d0e175789897386c69da25c5a5615cbca855ade9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.0.0","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-jdhm53nfPcLzsuzaAgz3PEZW5WRScxk/gCm6ulPbhUemscYSg7pvfaBxVBaLW2xpSzcOegKIlGER9n2m/Wi0Iw==","shasum":"1745144417357a562a4e79c57def227684d8a11d","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.0.0.tgz","fileCount":8,"unpackedSize":21982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp4onCRA9TVsSAnZWagAARvMQAJdpc7BIRGbuK5kr0rTB\nnDoPt0NwFucl/6Ta9+3V2/4W/FmPthH3ni4X+tjbYvi0twKrkGItjo099INi\nC8pZ4r+EPkhZh4ebnKZQCnx+qNsQSeZk3AthLgWVnM5vaQw4/dDiEB+9oHcR\nOBfUDp/Q2TPM+sFzQpiQq359pI6iXMWRBS2fYC8f4i1bxP2E93K13eZl3fo8\noAWoDG3TLUJcvYQ1mjFNsfuSCvovwn0ZDQVVjTYKvZOZKvDml21YLEqq79vN\nRlXzzQyUZGEq/tCriCGPVEb9ZBebGeeMoLajwdeVgU/x9MTNX/5fUj78kXsY\nPp9RMfJFMHllcqhiZJJ6tMyeSWyrU9bcL4vEP/xDX0vJW20bDh6/GRzZjckO\nHZb7JWherRrJcVRxHd5TkYEmYW7VngTGLYC8zOa7ZWint8Uh4Q0xrmAZ3Mfz\nz9ZOLzoKmDqjK8L3qPiO+TskleknTJ6/pgV8kFvhOZd0+e9adh4KKErRktP4\nt0V+DmENBcUXs6XT6bkDJpAeQ5GjHUOILZRb6Z7jani8Q+hIWEa8fYMRnxyV\nft1scrMb39n/v+OZlT5CG7D9W+SLYM5qiDd1BWe+OtULbqK6hJU4rcCS3DOJ\n9Aa4cIgRp/OIlBIIp0BufkAaQYN9r8E88dnOEyVxhBQeoWR2WQ9M+WLfwxvf\n+rsp\r\n=7+T/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB3dPuP+aNgxazkblQzyIk9ifE9Mwn+8aCn5uF95dvLQIhAIULeKlBWn6VscPtgir6qZ7MHbN+OJzj4nqq0SGpcHoM"}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.0.0_1571260966774_0.7688637596020926"},"_hasShrinkwrap":false},"1.1.0":{"name":"react-material-ui-carousel","version":"1.1.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"3.2.0","@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","test":"react-scripts test","predeploy":"npm run demo","deploy":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.1.1"},"gitHead":"085072b33256999f8921806df9a0ab1592ea83c3","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.1.0","_npmVersion":"5.8.0","_nodeVersion":"10.15.2","_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"dist":{"integrity":"sha512-WNO3QS9rKFPj+Sl568d/mHUuYhOfpdvN7pvczjTerDg3e6yaws1OvNkSA3D8BFk1h5JJbnqRFZgN0hL4lLsepA==","shasum":"19cb4b6930a386806997023d19c1fc481acb9207","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.1.0.tgz","fileCount":6,"unpackedSize":11949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFHKGCRA9TVsSAnZWagAAIXMQAJ1/P6DjawLjT4cNv568\nKtt9NKFOnewLUWDcNDUjAfaDmYz549i/jpHbZn8ztX/+RSL9zLxCS3J+S5cM\nWjMAf8XkJAbFIV++2X7GgdbbhTChNtQxAj+jiRkl5zQ3UbLUZP+alYIkXUPD\nKGUWsFnuxyubvuZlJz9Mg6h/Pe1NBagpDKl+WMQGg683yfcx/I/Pw2kUxRkq\n3/xDJ7cQrw3FzlPn/dqRz+cmQaCNphGrGl1kAg9Zk4i4AuaWA5ku3x+1smp8\n4HPJxs04O+QMlUnk/ekObpPaZ/5VGkFAJQ8pemkZLGqmxhMY6XOyI/bFoB5h\nJrF/R4yX6r679iP06fi2LkmETQhE7vpgebY9BQY0AdhrfblJ5AtNcX0FqaHM\nuAYHnGRtaEzmFp+5Bn3E6QNxVesXZO4WuZVVP+qHNAjYxhc/nPCuvC0Dc/20\nERjnTpjN2UPIXiSMpYihl/Ui7IqXfwSvIuoScDa/fvmEhaEmIHKGEBkhgMgt\naY4bGgng0Uw1syyKP2kjD4q/oBwaLN+AeYpiYv0T3mKDkFyi8AYqqPd/4iOp\npFlfF1y6BXvjwSGE7J25ty6pPDpxDvwik67/S//jSxTvGAigOHBcpJ8JqgiN\nqv0DVRnYJ7naKAVcK5bmN0/WTE4T0ZvQfuRssnAciajGdbUUpYA2fv9M+e59\nF5Q2\r\n=edPC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUd54hslThcyfkfLePtjh8SR1YKs5QtW1V2c/ePrhVawIgLi1oKPcyV1ky6ZaaWQlD3T7PCVj8HlwIM/oe2H6sWd0="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.1.0_1578398342301_0.00493757269419004"},"_hasShrinkwrap":false},"1.1.1":{"name":"react-material-ui-carousel","version":"1.1.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.12.0","react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"^3.3.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","test":"react-scripts test","predeploy":"npm run demo","deploy":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.1.1"},"gitHead":"a5ba3ccc4d61eec9ca1380349d771322b133f8a9","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.1.1","_nodeVersion":"10.16.3","_npmVersion":"6.12.0","dist":{"integrity":"sha512-WaP5OiuP4qY0yhhSzwLEZjlvZ3TLIGt9AkEZ0UTydkwIeLmvIq/qnFc9BLTslxXTOTdu5u+mflXGLOlYf6XZHQ==","shasum":"2e0d460808e8846737be401aab00b34d93333efa","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.1.1.tgz","fileCount":10,"unpackedSize":24438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFHjkCRA9TVsSAnZWagAAaToP+wSv+ZuGcwu4zeeMhmL0\nNbN8TLqC9GiZ2KgvVG8/7zN9z25Tbe4Q8bcK4ZvdrsgteXOrdXZdrrKY6NBG\naj5cs0eZvewdQ9xiNAtpoiakUeqRnn1jzy6LziW6b6IdSE9uwMZtWzdNnpRg\noFYzLM8tlLOnYH4CQ1mq2I1we4NDBIsInPFW9yCYnglQnqRrz8pA+trxrjXD\n/wn2xr5oTZCUoslquYak0kLTXp+Ka7B0FLS4436nHRKaIhaZi/KOPNpIdHld\nm1bm0AgCiXK6nsZB2WqAbOHFmTNlq8wq6CiIg4x55uH8ynbDTWait1Fk5aoO\n5X1ufByv1WNgn8Ovkmf+ZjCrzr1jF2hn73NedPGG+2DibKdeSohxlPFyWHny\n/dNRpe/khQsTf+wN/fXuR9p3volscZqc5P2lf0e4I930oMBoTJIccJn4zOQ/\ntEvYcAX9uV0+8/scoLunSv7tcRNly4T4yZIq0pkjqHVpDXTT7ggGF6Uf4hjk\n2E9RDzUm/DMSqsiIvLaaI198Q0gHHdgsarnhvpK5rNbsXJjF+ZWps2GINy30\ndK2j3OF27+QgZozYMhxZm3SgW4lpjjH4cBn1wsysbr7WAOU3Uy33/vZ4NMX6\nbIOHnMpC7E9HXnFSb+RWmMU8U8F+7KFd408Ol96s50ujOjqBJmon4YH6VxY6\nuLhc\r\n=RKvz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSXxGmVGfGmaCFtOaNyRq8zh+iFPkf/K+baUYr3j8wXgIhALgrXNFDjQvFFCb+p3TycKB5gvPSlD+njmA4W+apSaY0"}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.1.1_1578399971675_0.01160695673301082"},"_hasShrinkwrap":false},"1.2.0":{"name":"react-material-ui-carousel","version":"1.2.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.13.1","react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.1.1"},"gitHead":"de40497060e211f9552fcda8c4a6782ce979127c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.2.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-LLrb1UbCfvJ/j8jVQQRmfjLYcLDba45l4aeobnRGSK83/nc9mSdmfoGnkUi4o6RKAKsKAAcg8eSq/ZImK3htgQ==","shasum":"cf3372d40d37c91fe9c306b70497fb5f2879cd94","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.2.0.tgz","fileCount":12,"unpackedSize":24920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemFTvCRA9TVsSAnZWagAAVXYP/3PmuNcgY9B7ubqwwEbZ\nZ9CPGarpFQZrHZFddy/TmIjeub3WqApY0PVNP7jswXRkCFIA5VuGC7sx4Wyj\nW2FUEhvdRM7Eod1lwaAJ9XmrT8QlNnjuaGpK0SCouHN95hHW0M8jUrZN2gEZ\ncpI4DR5K6P7UrqibJG3ZeUcKr2rNW8I8z+yduquY4TwxsQ27UHKaeWaRLvr4\nQJLGs37oIFMfSf6bZnd5bQt4Fl+w8ayvBhJ2G6BECZhZ/shGSf4i9nRrlm0b\nmzKGKeYvp9WY2vjO+PS5n+tglMOppwp4zbFuqMFNafgHTOuXElqXT4AAuDIq\nzyHUM+YAlrTzwFjM+6iOH39QJOQdhC/MCJkLbQq13BKePpN1kRaB5uKxtIJm\nMcUOpZYzoL2Ryq9aCJ0vkuf4YhX09YGitNGQFuBXwMBzmaOMjdBMF04eGWz/\n3c3Q+ninmiIChgx9zOstl/v+PgHw0lxoIJMP2tIYcjRzBg8PkAX2tQZsURRP\nQp67vFOJ2wdGOkYDXLoa79vU+ezN1mhI2R6vZeam3de4yDALcnla3lKWPkMm\ntJRYC1QLosBlvptCsu+57z/qkX1FEuNjKFf9LdAiKGydpmoW+Y12wGMlzml+\ntYrA858r0p1C6h/hYBAtBRA2+3mBLVMlW9BzNhcjPc3oG3x4Sb6LV7N848pl\nJ51k\r\n=U+Bc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBg7agIxxG7ypg7HL5QT/n+DVOSQXostCgmn9wCFbAwsAiAF2QUqK66oIIOKwKlN/NA5lFdbY6vYKKvwHBMrqd5/gQ=="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.2.0_1587041518305_0.23583480271349222"},"_hasShrinkwrap":false},"1.2.1":{"name":"react-material-ui-carousel","version":"1.2.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.5.1","@material-ui/icons":"^4.5.1","auto-bind":"^2.1.1","node-sass":"^4.13.1","react":"^16.10.2","react-dom":"^16.10.2","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.1.1"},"gitHead":"53147bd2a4bb6909d9f31de627c4e903c5168a03","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.2.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ldEE3egvrJr8Rs/G+Ju7h3Hu5RL4kZoPJxeazPBxP+HKRnZSLfb590GZ4R3SfVu/1GXDrm5wcjc9cB3JiSPnmQ==","shasum":"95a0524ba592f8d433bbbc80f39e5ee524a8e9e9","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.2.1.tgz","fileCount":12,"unpackedSize":24921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemFY5CRA9TVsSAnZWagAAY3QP/1dMn8Q6/igejBjnjxaG\ntHiC8YKd+hOO766hJ7K33lhR6hXSZxbiquxzC6+sJrH/Xc8jd8dUJyktdIXm\ny70gXnM3x2E2Uhu0MuxfcDax5W7g3E0MyT6SqdO4fhyDiFgXzAuR+UiSI8yz\nnEOvu+J561vOliZQbs8/sITvUDUzX6idRn66Yiyc6zqD2j9MePuTghgOkpmy\nIIi7b7yM4CmLVFT9k4Ov8iWXcDM8rWwSbGmK9IpnegEZNW21YvbDz0ezcrb+\nZVtQB+t9KI3OnyLU+8eky52A3JZi8tigVbg77LAyf/waGPh7LeZBP4JY/n/4\nGwu5v5N82OnbH3O/D41IyuCjTjkxmm3ty4Lrb7MtxMusOL3OuSLPGNX1GzeK\nvvdU7L7RrNc2CXjvlKE1p+n17rpjVqTpW1rWgmzMIZ1UQi8BxXQ/WmwFK0DI\nSPuEO24nAwR7gzogJ9AKN9YrfKWrsSGzYSCC9uvDBGLfq4DPhd9wQMfDyJGC\nyref2O4kb8WHibEMOx1EW/DrYP04V/y4t/jRA81dWwISXo6MzYNx6FFulgI4\nItVBsDeABzY7/9Hte9NBLVRDDZKPEzSUKlgM71Kqkh8vWTlkp3H+PMTRMyOm\nHuGS+lP7vFckkdpLnVpUlCl4feUgR+YHgnrYehnMPsBeKiyv+i2v+Ty/5W8V\nvUJI\r\n=hI0f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5A3kphv2MrCZqt4wITn8oKu0SgU+mBSPygFKYlmXBxwIhAJurdw9kF5zgEps42kiS8nPbIUo4Wx+DR4fK+jOT/Qfp"}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.2.1_1587041849372_0.7094665886906717"},"_hasShrinkwrap":false},"1.3.0":{"name":"react-material-ui-carousel","version":"1.3.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"gitHead":"6251fff3a76b960023ae09b3f07501f81573b480","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.3.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-FYxZ4an+Y3Bd2Z3WMNwyFK+w1GpRcP9rQR2Xz3URd5JqvdMJcUF0TDW/Rz6RNfcsjYIlhHW+HTGvDF3eZwzbjQ==","shasum":"56bca86a7dd7afbe394f248376da23f2f61c1008","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.3.0.tgz","fileCount":12,"unpackedSize":26175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoZufCRA9TVsSAnZWagAAA98P/2IZDQpXUscXtJcTJAR6\nPvVUdb7S4WujA5Wvn702dfCU0e8LtGm5cg0ic+aGMbbFVkcRium7ugTM4XM7\nbx9HPs6gBqbntb3Vsk7USJiZ9l72wl7v/4PmfynxjdRGKlGCx32vQjns/6h/\nSlHjuUbqP7FMt72aAGiXvy7n8GsBfkBXBrqHYiNrVsXC+X6aeHjDubihIvfY\nvO0TYrR9ZDYUz9KLvE7MeOFb99UOVVav54W12+9WlLZor3MlX0FwaMg6sAEh\nAeFNUHhXygoRY7tE7xwYu02sfPiucBS9OyoA95TyhxslwoLQfPZElDgmNlC+\niyRIZ9f/h16wtl8cYkUo1vLuswf04YnCsPOyr3lxYg86A4wt5V0giZB4hA7Y\nzEZFuAR8EppKEsw2NzbeX7BPyt4igpRKPdBDHYCmLUAeXzF3y7uG8N0+zw8S\nCohUUWfXGj2nUFZDvmtHBrzb1MeRk1pnqawAGjTkuwx8gYYN/qoIHIc9/YWy\nq656XQqjTdhrMZkg+Pp8OSoe4pY0FhYWbSPVFjr0j/NJy7NMFA2LLcU2U0rZ\ni7giQlIQT/4p1iHipVmbSlfbOlk23QirQc+nGwxk319iqeFVvyBwO4inZEj4\nbnWb6qGdN6C+E6Liz5juBAKqnLvv5k8EkbspbJzNsleEkDF0Wdhrtw5VAF3y\nID4u\r\n=ABOj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHJ3kGyJI10FJwRMn7mq5iNYwg0h9uOm/VqA0ndvkPOAiAqykOGYYVRk4RIfjMJKpkuEmX2P/KqP6UOP1pK0kKlsw=="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.3.0_1587649438586_0.9025284613078031"},"_hasShrinkwrap":false},"1.4.0":{"name":"react-material-ui-carousel","version":"1.4.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"gitHead":"3145014217aa486c52964d5b254777bec6d1dcc2","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OuxEgo8ntKGlgdKEdiNGSw9kWFzc4WN4iMBDC+YLPhjYKQADzJ119qARUmSAodR8XtOmEJxU5Bj0gkpR056cfw==","shasum":"695ded5aa81779e9b00782e0c283012b487663c5","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.0.tgz","fileCount":5,"unpackedSize":12355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepCVYCRA9TVsSAnZWagAAb00P/2I5Tr8NaFhqNQAzfgUE\n9JZJi4p3mmbuVmaBMLM+sQAoTK1w60P0/3otIqffEHU2dyP+EBd7wUePNYCU\ny3Eiyh16gZXf5T3/D2KKudzkTbE4kRY96CMcgx9zWLqBfagiaX2x0cFFYTIJ\nULN8R2TN3mb2D3hJ/JBgioU8y5eDrk3dwBXb1DKwp6pcB6O6L1PI6hJblX2A\nAiZpO99+fVSC+W8Hl2jKAm/1AKpbRzoNe+QLGakjr+QR3jVaVYvq2UcV8df4\ntMHI0OO0DwhRNYUBbDBIx2xPaSk0E4dRvyYzjxsx/8fVHakRr8UwGynGr1Ol\nc54pNRexwui80rW8H10axbeMpK+kQAVHcCLkG8z3EN0qjGYF+SMG+O7GkzzM\n7xnh0q2yTaPtv05+8JGMLYxXm3v/FlfBxPahImhyYiWMIRVJdOe6DK/cJr7k\nwQY5/cPRLHjzQuJ7kP9ajWnDcduXYfu0BNzbqidI/4AQEj59cwfYq8NMiQLa\nkZdIH647J0fULYSzpDe8Q9VcBajv3dz68JZGvmWjFw+jgFhahrda1tiqHHnT\nSN1rIscnTUwm2udRu1nhtY2FrBSEMPWWIceHeN+YXzdyqbfHx/358f1/OI+L\nWfFteC/Ri8mEhXV7lLRmq+LHWZkJVIYNEy4BBz+tngq4gvQxz0C1T/i/kQQ/\nCwKn\r\n=yNaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0pzsikV/tU/0sxo0aVWH2UIWyMfxWfgWuhG8jmrDQhQIgDCNscEAjz8/Fg5Re3mA8zTA8FxfVxY/V5k3gEYEwHSw="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.0_1587815767687_0.2375824459910778"},"_hasShrinkwrap":false},"1.4.1":{"name":"react-material-ui-carousel","version":"1.4.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"gitHead":"3145014217aa486c52964d5b254777bec6d1dcc2","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-i5Yxk3peQSzFG+fKqhT23IggXmw8vwdjJ3deFqbBRKgLi+c7Z0z9ARO2TLt77SCrmKmrT4dQdTbXTAx6xBMWRg==","shasum":"d8ffee6999fe7ef7da72a56e4400a708993dc6a7","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.1.tgz","fileCount":5,"unpackedSize":12355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepEFfCRA9TVsSAnZWagAANOYP/iZgSCRX8IA36ZNCRvH4\nDK7p1LWK3SrD+G7y+9nxGyXs/KJwbccuwYmVAITc++AxFyw8gT//Idqp3dHG\nxUcWDVCJL0Cm72X3hb2cPnCzxXmmL2LXFDSuNGY44HSDxUhrFc45D+bC8HSo\nxMgvBwZTzGMe9iBP0yCfhRa1U/nRwnniMRmwgWqtGpEAXT+5QmIBUu8hWCrJ\no+2s0rt9OAJAoeclVynGWD73Zi8G4TWoBzVwBjJYGe00hPZ/ssGfBb6C0BHD\nVD54Alwhr1J7XegG9LZGNqMKMLdtQ5EQY8zTkh6PabK8aNohtyNclq8q1MPE\nk1nJU2XWnCB96mF8FDX+24FZFk18ICBDoeyqLJ/iGcWu8Zu2dQxVjaJKJm2b\nyU6rhO2TMVMRARtV/jdWRmKfpUPVx6S0E05ptrBCOn/1CnKJgYTbWxS1YflX\nGNj04eSPp9MmVTb9TUwDcncszycrVIlFNyftQ/94Wstq53RoSE+fu/BM79GX\nOw0eQTnxP4fDUvUFUN/739wMQ+2qFiw4ldXGV4f+VW62smGTviD6ocXrGt8S\nWvUeGEX8P93ZPA3V5iqli2xSeREvOYMoMJyJId71AGaygCF+MMaQm807b99u\nXzTKzL6j6O3sb3mVN//myKzHz10MDEIfDaFCCLDldGvukZVkJ+JQyW9Iz/TL\nmcIB\r\n=GNex\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnQXY3fPfs/NxGFmkGdHC0MqPoWkw+xoPGbJDE84AC5AiEAvV3LjSRhOf9fugfXs6nAfIOjmKrzhJV/YIpPkOhq+S8="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.1_1587822943140_0.17367213609139887"},"_hasShrinkwrap":false},"1.4.2":{"name":"react-material-ui-carousel","version":"1.4.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react":"^16.13.1","react-dom":"^16.13.1","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"gitHead":"3145014217aa486c52964d5b254777bec6d1dcc2","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.2","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zZalOI2joL3V44cS0XPajAcxZ7KZQD6dhPUvnDK+G9PG+3M0aFhDuDWBTqKa+N95gtQhonp/ZB5yZGHey7TrEQ==","shasum":"ae97c60031e643f7b2d7e4028afcaaf442990f9c","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.2.tgz","fileCount":8,"unpackedSize":24009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepEIZCRA9TVsSAnZWagAAt48P/0LJzd3bduBLkebIOzS/\nn6ZWYm5xWeMLgOAf9qpMM3O2/MSxyvuHQUIe5h3U6wZzMnjaWwptoyFMuKPN\nx/pE/GltYvfzBE0j5sVDshgxh0USIFXq7asqLs2q8hsOgqTi9MsFCmSW+ShB\nLS6O/WRAt7fa4MiUl6mGGjkoCc+KU47XqR+U03A42eBU00RlD1DSNofHnV3K\nKH8TmWd5RSApM+9aY4oJ7QYugEGyXsxREQbaZo4abX+x6bBPZFCNwTv9oyHo\nHDw/sI7GutuOAOYaTlwXZbMhGcQ8Yn150YrwylayQMPtjBVQyLp9VrDPAKHx\nGncRk1Va/roCHJQmpQqJb5t7Nv67QxSyZ71Y8QE+P/9WKOIR3oKw/CsJyjGF\nqnP+fRzwbIt2JmcPMitq7lvlMD1qKoNTzh7bd+7J0IxsU3rFtxuRuryQBtXL\nRjEuCUa+Z/fCwXWXyMuZHxdWtmcwRTvfDeVyHWgnhLpNCGNpTnPYcGvPHQ3L\nIQM2WVF/HTjHUT87RL/V2XUvW8MsCxpAjMqxx9/RoZVmxUar5crcm9+z5jN8\na3lAdh6cWCDbM6xkBUumbRxCt/StKoScvmTtmoDYYznlKm5S61Vf/6Q1cPKr\nFDVFLs1uaK2smtGyRxW1O89W3cxIGfUIWYbCis666o6T2BgPiGRLO01RuUT/\nSRsm\r\n=19IM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/g1ko/o8Z6r5I6iTe9+pApZsRL9/Hnvj/Z/zzGCUAGAIgCcG5nG2GZRtTHVUzB0w00tFjfDFkkZ6e9/TDRbR+PoE="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.2_1587823129572_0.8219472625959412"},"_hasShrinkwrap":false},"1.4.3":{"name":"react-material-ui-carousel","version":"1.4.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"c9bc0388078f4f0f05a2198e4f0f78574e7652d2","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.3","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-rs8lksP55kILgPUf6Et8a1917C84FArnYQdye0LdNzZ6z8UBGUJlfXn7xt2x0vGXtrD3ZGretIJyl0nGXfXwVQ==","shasum":"1ab3f5fb6fdc45382ce52714fc430c823443f835","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.3.tgz","fileCount":8,"unpackedSize":24037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepG2GCRA9TVsSAnZWagAAGt4P/iNwg0Fmc0MhyOhhszqd\nyn94yg/LuQLOo7IAy2oQgbsJLFQI4GQ06soy0MaBJfBKrkdQye2mUckk8RFv\n5uJsscQW2oos3nkPLA0vNYITvj+Ap3kOqZIUvqJy+RF2zmF2vW0DE0q6iO4p\ntX65eCXbBDq+vLnNKDsFOHkB38MgQ117B96YYK5PkobuQeJGqb00F9fvxQzO\n9YTaUN49M4CO0qr8K+F6k5o5pwgFIIZ/d8dCqjArfiuQLqCNumf4ScF3JvbL\nbvcSrtWiWNZV7cGyzcBRTwQP8o/d51xmuhe2vw3iu/td8jCDCiaFpmFXfcYm\nynmF+w+EiNowPuNOyc5OwjXpbzL7ArnnnXk5sBkjzZT2Xmli7Ouh0FVLvw/c\nUwSpCie41m0LATATaAgvqXZieumsFyT7iUhMcLeHAYlWSxFc9wpvkp1I6KoJ\nC4nb204oCVML8Trqs9yapVKUA2IEGUhvX9gSJ37yPcljS1CXECcIvLVSBlkq\nBZea1by6bSMjF139EAPhwCWcKG84Zc0XpAiTm3SpjpzvXtTa+dKSAeHvo0oF\nJ2wQv/6dMJKz3VAvx3u1TuE3xCDvnmbTJc7EZGvFx/KGgoXwxl0o1tAqO9sc\npbrirwkpX4pPS/jUlDQb7rRoxTt64vHjNaU52vqPNIJzyVV5wb+jtAQNq2zC\nSbJN\r\n=xDpO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWE+ytre/XnEni5MpxdolpCWhg4IwpaGkjx+NFl2RGQAiEApRi2mY75dx62y2AFaTL4U35wP3Z6cLmUBTaHxk32ifU="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.3_1587834246156_0.13100998622629567"},"_hasShrinkwrap":false},"1.4.4":{"name":"react-material-ui-carousel","version":"1.4.4","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"e0f262ce88625c4f9b79a851745be7b613bfb80f","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.4","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-tq19gsWpjcNclkuU5ZdNrdqO2bPlg6ePF1xxyvNATDWWaEOnGopmgLJBqsIFy4ZgRK8ZDBYfvhXpXliEk0J8hg==","shasum":"368b0dfc2811c47ffb85d37b6446bc0f18588136","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.4.tgz","fileCount":9,"unpackedSize":27710,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu+uVCRA9TVsSAnZWagAAn0oP/iPBdIG7k6r8zM9OU2ht\ncaq7YRiGCP9QGB7OJqN89rexV1DSzjK3KfsY4huKWpxgzfApZ+6GKa8sz0v+\nqC71zwNAzKhCWKWQ0p3cB0/B7azbKeiv2JatxZQVa2ZRzIc1E6J9Xtt+qgbe\nCfFID7C3kdS2xzAZ6/zU0K/WT1rTB6K/GmzAsVnvRqNVA7uELU/znnAFgJCX\noBvHLnuS4gF00tXBnNCtsiFSAaIcfPvlHJe9bzSKsdtwC9mTyAx1va/xlQWl\neajy7SUl00TJqwrKi6vkk2pNatXEWravR4cyHwuFS6vCCW+dlzZC36z1qGjI\n2s5knzViDDu/xzW+1W73Y5GKrbq0ClNARwIcp2DMFOaB8ARu++UDi4ef2nG9\n3DRwLOQYAVDhBNzTCD4iyOzlD8ilypWMqYP7s3MQ8oMeHxKsQqJfjFrBoxZj\nXAnmFAXVCQQSW5d9JWWUJXLFM8RazcEjJC22gjTZeWT0ZNPsJLhifiKJ27aB\nSucIKe+7owdxieH1Jh6MNVsSMvSe4gxGfdlzfNXja5ol6biKwDSmJTLGR+Em\nhcsJWdMUjyBP6IbJGFnBRjt0Nu/U0KO0+oFIy6FXIMkqMzthGW7ThRNIkc9F\nBqZ78LTE6WvROSmDebNZhYYc3yKyXsW7E+whnbFgFvMbFx174eWHptAKODmE\nCYCO\r\n=2WjP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9yjBIIvzCEVggmEJYi9dn7SyyRnhrLdcWo2uQ5zQ17AiEAvGQ70sX6zlyrB9bKoq3EL+0PGHQyW7p+Mh/q/BcqJmI="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.4_1589373845198_0.1978026227230929"},"_hasShrinkwrap":false},"1.4.5":{"name":"react-material-ui-carousel","version":"1.4.5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"dfe3e4a6556355fced8eb2515aeab6e748def5cd","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.4.5","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-TxcCV/YhFyyaHWKlNsLei/9fJiZRpcrYmbb+I302wBib5yDTMKq3drMn5Z263OMhfvElM4O63Ez0xH42Q3WsuA==","shasum":"e06fbd72709dc81b4bbb082a5af52523a8894059","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.4.5.tgz","fileCount":9,"unpackedSize":27671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevmRACRA9TVsSAnZWagAAuw0P/RkM9rDsBq+x19aOthSO\ncO53e280s0Vpd/wNdXRg9s7zKymLaXdsCXXdIo+ZAFVOQpHU9LnuRYdMwEbC\nMppfeB7XYPkk2gPbWT0I1AkM++7DfiI3U6xJ1L1hkiFJ5Rag3ZXBQgaLEQAE\noTWOI0S3iWlglohdsXChr3Wkmqe2Wv0VVcLBUinDhmclirfxfnS+KCxAi2hA\n6HRfU7nK8s/zc7wQDOUOZBoAJtUe7Ys/rePRQ5FyxdcESGwefPorIIr75uP+\nn7XYRj06Y92vtrT+aTq2GUGUKNYHnxY+mTkw2KoXCGWEv9gnMgA4bQY/jJ8V\nJ0Uj4p03uQzktn8TRAVr1Ui1FqmoLJW4K/hZ+e8+HFZ1pHN7plgx0ZFXj+mO\nUG8jGztrBAjo2g//gx05zeH6Lw1dEntuT7oSeqKurzj5iAyAlt3P/qrhKF8z\nmVt5p+QCNdEKNmFkfjK0YtglIoQ/q7BSnR7hVov7QMqp87qCn/sub8rfbp+c\n8TqIzvZAguEyj4GW3M1LNhrf0ZArhiGAkqaH7NE8MLLLOxd1XBuf5IANBHgB\nVuBDXcajdfW/mMLmvn0nkv8TSG5nFbrDZj6YVUrT0JnuexazUQArZuinZ6Uo\nYpXrBEzZLQdvtwwB/hUfkUtmoYk8b2UJmurUVX9PQCJCS2osmAMBocimGtdK\nVOPo\r\n=j/D9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfvChSG9qko6GvR9bqhCSbPRczUuw+g7bE+Kkz/zPpPAiAObLLl0K6s8boByDg/1UaE3Fs3zeJNMck7rWbv2dqJew=="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.4.5_1589535807547_0.45596478680302477"},"_hasShrinkwrap":false},"1.5.0":{"name":"react-material-ui-carousel","version":"1.5.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"a9378a6bcfdb19a085a5c9e95f173ea6e681ea4f","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.5.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-CIHQ2xqySmao4qa41Q7NKgLCd7JxzvP43WKMLfoPWE/2MkJGJTLLQh5KHt3T0ykJQc0/U2cBAkFQlP7t09vZGg==","shasum":"b708d53e3998b0d8dacfdd5f59af3d93c37631c8","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.5.0.tgz","fileCount":9,"unpackedSize":30939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey3sOCRA9TVsSAnZWagAAqkAP/2rimctwlg8Pv9qXswCH\nG8k86De7rAocSQuU8qAxUgGbiMBjND6xMKVyAF7shL2scYhdJomUALonVzEW\nErGz1sI9aJQ66IN5zHERwQS/0MfXdeh5+GZrkKRwhNS40ign/ujXf2otIsuv\nUiJN+pGROT0wz0f2LOrblrAQH/1kTD582d2lpFpZPwnX9o7KdniA9S4OuDex\nU/M2iBihclBKt4ZlaOtfah/4k0WL9MHKv/8nmT3DG/tDwXNL6plpaoasoL7y\nL6uQ9KLgjHrk/iF6u1D9XojhC7rBjYb25SlOvkvYPQogtBwm0Qltr/OG1tFS\njE+SIl9q0KdxsLkfqlz05/cU001xIWAm22czxT77gej4XuAOyq2hD4ht3ut9\nhMtMGKfgjFoltF0XD8OlTmu1K8+iwtpUChsoiQfE7VvFxgzNp+aqIMvgc0sM\nvtFIvU2xz7plZVZWmdfbQatKAuqpo7PxA00umLyGizx0eVEw5cbtuP43POtj\nDiGt1VGFPey7BjmXJR0EyObkU4croHEcy7SwCCMAA9cd6Y8f5R7lky6ZXYBQ\nbnwFm9Ccll1ctKT1XkV7TSc3T1F9Q7mXL9ASNRQau6TR4DwTpT+Jw6DV1Rup\nY6pRQtZkKv5Gar/81yRAvPJIsUWfbQqIiHZp3KPMNcdhn0Qt3jpyiw3TNs2z\nvLlb\r\n=KDM9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZQxN6EauNlgDqkOYzDDURZvjd4PO216fkwuQia/zBgAiEA4IVHUY5w//6klqe9RIp8fdbaO5bkXj0RLP1NfCKO5Dk="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.5.0_1590393613831_0.6734376354715541"},"_hasShrinkwrap":false},"1.5.1":{"name":"react-material-ui-carousel","version":"1.5.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"8b7fbba98bf17e88eb6fcea9892b7f3a504dd5f5","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.5.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-jIRvbtltPJghMM/gEfnPJnLxEoOG/l5eqeMupUb6E4QWHo/4aMZNM6rvODv21PHSSpMw3iWEBtYve0i20VW1Iw==","shasum":"68cf8c7ea1b3bc659b580248e6f25e0b84107da9","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.5.1.tgz","fileCount":9,"unpackedSize":32867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1jdKCRA9TVsSAnZWagAAAMMP/jMuhsyamy1Gf2HJNXem\nWOy4pgutRzSHassIf0kipOQBDQowY4zZgMOC5AmgxP5fOsWLSeoi7EkXQ1fs\n5Bc6qey2CToC5QZNq0Cd1VBon4y9qCtFVo/pa6ddxkXR9R57A3v2aszupnYo\n4Y5PGWfH9bAOoPIGZzzTD0+qvALq1NRhUTBeT3Z6kWZoCce5v+cw0jBkVOVR\n/iP/GdWlHE/ph3n5AW9rVbdecT+3AHY/f7binHui00arOXs8M3X4ojE7TcuZ\ngrlZL54Zd5PSCWSGI/NGbU8gDz80pZtY/kzEX1mTwjgII51tNo6WeqhiAac1\nxeduRT6RM1FnYt9fMG0kncf2gbGDR090gDtOVHhMGccRzKyYph2aUhveIfgE\nv3Brv2yYUSk4sQI6q5vhDRgFFkAl+rra6iNlbe+oXfU4VJdHYZjN2S/ieeCS\n0NNg1GCatLaRcMxVncAlR192Jz2u/Lubet1jFUl4MgJ3JFeclS8VrN7CeyxE\nmEAyeuIuZDqQsGgBYP7AtZ7K2mFAxpk3NQutrInZJMEGZrJFC2nI7G3Hslkp\n7Lj8p/hOiVaEsJ3LyK8zN4JAxS4Q2NfwN0bg/giaiKNCXWZXszOO1SGFNETS\nI7j4RbTMrX9tdsIVv8RRze1Z6H7OKe84fTH8hOv8iP5g8ZYuHVNxYxMPjPdZ\nX55A\r\n=EmQy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKhGIxLab4dJJwI9zws/do2lihmiuGmQRbMbfi0rLIMAIhAK85Tazuhfeef+eC0hxuegBR8Ltjdfk0lJyOWxzBXm+B"}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.5.1_1591097162383_0.1706955054710324"},"_hasShrinkwrap":false},"1.5.2":{"name":"react-material-ui-carousel","version":"1.5.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"517711238f9e3e6c5da9cfe75370903d22520ade","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.5.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6ZSCHmXZV8ZKHQ5FazBO6r608lH6Gkn0TT9026FyfiOY+Uyr/PLhvc/EsMcd5HcIxy0OGxpPwAf7SQa91/FfQw==","shasum":"a1fa0bc957c075d271ee560ded2f614859c204fb","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.5.2.tgz","fileCount":9,"unpackedSize":32956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5J6eCRA9TVsSAnZWagAAelQP/Rk2yC685Rc5raHkokAs\nzd1BlNSJ+FzNRtEucS4cS1R7ItPniWvqi0WSpEPa+OwOm+/b4yX/LeUIazRN\nPWAgouAhxpfdKf4Lb/TfdkSWTTRrrSFRYKpMuQ+HT8gNe4SvKsO4rdJWj74/\nwzJKLgGFBmLNDy3sol1GpQbPq4MbxK1n0WD8i9Sj5ZNS67d2KvcQxSij1vGV\n42wLae/OoeAL4V+CA16OK+YCcBhq+Z75h+PxuDn+CI8WapsoMmQNdgrsfaDZ\nnbrJItlp5GB2S8vxCt6zqm9hCVQJVoBvbsMjBsee7WO4hEXiZIhgBE0kqK0E\nJPToG2DVaO4vlRe7DteuApkY6zLgnwdcq7MmVHuyOUeOZMGylcy9k2NnN5B+\nV79HILNzBfNp8+GUxnHWFdR80h4/SElm99uPjY/7M/rcoqNZoDuhrSSgRsPa\nu+bRPmEfEpclw5pr45tH/luZ6s+1EqlYxxSCAI/BtDAY0qaXTFWU89MHYqS+\nXLwgI5vRPhzdZIDjZs37uDThmyLeU18pfYuFOuFbdFuXptfeYoxWztEtDCeN\nFOuskD5akdjHunP2YqhSAeinoJJ9u5yG+Az30M7oWmbrPz9LksLgKEsp3JlC\nTAOFRKwkAAaL7SddJeVrUrpfgTlku5hGxEE9FGGh+hJEZnHysMDniuvljy6F\nz9lL\r\n=9i0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+auH1fr174QtshPB0Zgnl87miDRgEux4uR+ohkW65IAIgQAts7HQBFeShHqgP266wxwWjMF81vSCwe4XFFaVwqF8="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.5.2_1592041118309_0.3933859260496708"},"_hasShrinkwrap":false},"1.6.0":{"name":"react-material-ui-carousel","version":"1.6.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-scripts":"^3.4.0","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"1330c11eb0750f4bce0ffcd9f9dd021effceb2d3","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.6.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-thiCrAGm27/vZyAeDI+supOVbeBF15s4L/eKzm95ZyvhnQOFDo3MSHx3xWNsrvcl4LkbxLqMOOwucXjAXWO8HA==","shasum":"ffc9eaa2e7c10eb17b7c65f50371867e12433cc0","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.6.0.tgz","fileCount":9,"unpackedSize":36206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5mDzCRA9TVsSAnZWagAARxYQAJsy/wImoY21pptwqUoH\n9SiGypHtRByDXRlRsjjIWVWk2V3Iu+yvCPxHRRX/+Nk+/L/KPUXDuyw03l8J\nHwAYHZc2q1E+Tt1wYIi0u+7/R90xTJRAJb9jaxer7yYV3FX6kIWUZGcH/66C\nXXlZnKVfal6c6rbC+dFY3WE2VghUtBLrR5nWDN2qnKT4+bz9qEAs5NQYUvSM\nwZSFQ2EbMJ1uTmvFaYG8CRhNJ6iMtNnPBfWnapTfmIpH4xKbdiEk9Cg6StzQ\nbPywxWAquD+ehMOWfvg3tOrpsRSy8TLr43g+l+M2hX+v0oGth7N5eY3LKXzc\nQy0auvNuxmAXUB3hgJJfLiYg43V6posKn0iWLiUa5mB6WwyMxN8IYnWaotXZ\nC3TZoHHC2fUGvopbIt0FMkBFo/pccQE/nUXSZx25Zf1Xnh92jKuT83I886jE\nsY+08Jgyg2mWiZOF8TbCs5oMf9UZc8QEJzDfLbwwuYMlL/sAh56cCtIx1nKz\nto7lyXareT2xbS9FUfkYkcW8XM6fn9XWYMFoIOBm91IRGI4Dmjx7Ih+VTtoT\nfHUNI9zjbI7/5/NfJ/RRnpAOKEd6j6Dv/MjfbbAn+8wns8SyLRkv71bsyM4S\nf0wcml0hhbVuDqW8/q+u61sWoLdA4pnMXLZTA3mGd4s+eWld8bHjZ9QNScuN\nhCT1\r\n=71im\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGclS0XpbbzUr7T4bhL4B37mVkgoY6r47+IccCvzhEVaAiEAwQLq4dgambmPqXIIx1e9yY2ZIFV/HzqgAGrmIXneUys="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.6.0_1592156402763_0.8623167865696821"},"_hasShrinkwrap":false},"1.7.0":{"name":"react-material-ui-carousel","version":"1.7.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","react-scripts":"^3.4.0","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"b69babef7639d7918a50ab8cf4eebf22aa3d2e2c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.7.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-azV3BVXJrWCP+NnfEMUzSPq9PILHE69/8g3kK3tweu/lH36IEiuC0uQWsp7L9xc4NpnD67xH3X3J24iubRYMqA==","shasum":"23b522d07b27cbfff0edf6a51b94e52d851b5c25","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.7.0.tgz","fileCount":6,"unpackedSize":26318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFqvnCRA9TVsSAnZWagAAjpkQAJECFIoIYRuC1c5qMYLi\n2uGRvech9RhRqgqpj3P6pua+4kzaTEz1KyaZJeNF1s0iTzKRJ/eb2Zroeiq+\nUHlarAilIw571sVXf4xbOrTUMrNPRJiaZzqIsph5CpjQ57DKwMt7SH6CjbOh\nBDC4+aW2rtZdl4dxVBMpADHB3n7ZJJsDsljiuUbgJVnHhQ5qrCyFt9kbpFpB\nATQiDylYCcvFujz5j+Jdr8RLEGbHb4GQ9Ke4Q1csq/RrEX/ikO3Lr3CFSSPi\nQAw5Kn/tcAGqy/dqpCR2G0ptWUQ13u+iubZEjYjHnisUUIywdoigrGWcq5Kp\nSxt+6yHKltOZ/+mWwvGbFF4lo1ueh3k878ntFEpzd/J1N+DLS2VrY5SvS0h6\nTCNncjj13+hMpEZjckR5bg6b/985j60YuIOjboxOQir4/YJLupirOS9TTxx7\nMqVUPnAF4auoTzANq2iwHkkZbEThkpIEOeUJkiLm4Qz98eGJPjy8Fba89e15\nAffYnmzpooRW7BlShnkCpwzA2tRQByCakhQDyeKYO/tZNtUNsFj5nfYVSSvs\n1AzkmsHma5Q01/6Vz/vaFzSzhhgLtThGRluHma90/abgUDh6nL5ZCjipQYTZ\nBsO0TVpzfyq8fZCZh+s7Hf51KVtDiPfvZLE6f4wLdM5upSjCQRy0LP6FUNHW\nCpdy\r\n=7shp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+0urbsrmW2whI1OXByfzMJNrdRCZbfA7jEsHBvCV1QAIhAKbLraqbRc7sCNG9pSBNILanZabOOeMMzIh2q7zKyDKQ"}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.7.0_1595321318561_0.049919772914566396"},"_hasShrinkwrap":false},"1.7.1":{"name":"react-material-ui-carousel","version":"1.7.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1","auto-bind":"^2.1.1","node-sass":"^4.14.0","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","react-scripts":"^3.4.0","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"gitHead":"b69babef7639d7918a50ab8cf4eebf22aa3d2e2c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.7.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-SgOISdQzfc2y9FyBgZ5VneUg9tK90PFdCyLBHQC0il7LxKVy5pSSzgdiZDtrRK8fjUMMJdB0205BlHpamUD2aw==","shasum":"ff351a23ed895d1f3ce1b81690ce6d5b76b47dec","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.7.1.tgz","fileCount":9,"unpackedSize":43937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFqv/CRA9TVsSAnZWagAAs/MQAJxMLvn+TTwaYwzsDeka\nqRGrk7vIsTWzZXFD15nO+AIldiJ6XsQEQscqtjYoXf8ynERueV2qlhDXiedT\ns+sHjcZqqlLfVPHDHHJuoow35nQOfd8931LVaXa90/6RC+hhioI0enIXrvaC\nd7e6rxFUKOrTECUsv9khNBKLzlBYbuG3i3rVZ5f7b1caXxcyIez9NqgnsAzB\nBnd4/e2swW0D+T2qBCPEq/oS1jUcaMLEYDv4sfO83Y1PGQ+eSlLCq/ruGPZ2\nZX7CzgyDJ1MK6kHoaGouatSn5iTvPN5kEVDnITBBne6jKsUlz16u19DwLwPL\nsqVr+DiyUZ7gKZiI3yP9buuDTpVQyrCOL7kvl/u0q3J7uA2/1ALar+il4uGA\ndBByKIOcOyWy3XJLnDL0M9Zd8q965QeSk/l2UgFO+UNlENeAK1jvZjuHln3E\nRO7viIjpMMLSfPqgbC4Wp2Uqccfg7jZu7xlfypnvF2C8JKXRsrPZeDbNGJcP\nebPiqyjqHNnLuD6JCxIxhTu874aqzvq6PIGrzTSydbZocKK0V1iABhd9oIDG\nE8YG9B4zFl2gwre8mQuWClj6YHmIQCzt1HuHj4PFdd3I+7AYv7VG57BIAuXn\nRsLn7oXpjmKCSjgWYw2i34X+I9bKmnwz2LfZYYw7EikEw9HO2NRgoLyzaSJg\nnAT0\r\n=buot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIjgEUI+Z7MtKUhdR473XPlc5AZZ8tRFXEFIeuDf9GkQIgIxFjKm5XfVfxAG0+esfnfMU9P33qLUiPvb5m/nkyqG8="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.7.1_1595321342896_0.038456263005295366"},"_hasShrinkwrap":false},"1.8.0":{"name":"react-material-ui-carousel","version":"1.8.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","react-scripts":"^3.4.0","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"57fb46a5aedd91577b8a0b08a2776a25178e0b20","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.8.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-j+L1Twjs9PQgdjeq/n8prpNokuOMyEdaCcyw3m3eiaRghBjrKloaUEUzth5xEvVj4RhE5LjLJJRKcLldwZH4uw==","shasum":"abf22bc7393f48af2d522504788834695162e1fc","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.8.0.tgz","fileCount":9,"unpackedSize":45109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJuvNCRA9TVsSAnZWagAARaoP/1xLyU1s2DfeLifCAIXv\nGN3njd/wH2dYP71Rru/GBW7eioL1kf4JM8zLLtAwEw0FMjyI8i6xwzeCl2N8\nVsGHXh0a/ejAveYDDfMtRozspcterrkBjCwkQt7H4okCVPLXMh0TMksK5a/3\ncs1zlLuCq6/UaJT11Dzo0jTwoiH20EO6BarnQISLpJYQgAsxUTkloIUro/GC\nEqFVVeK3XHqf/kF4L4kt2JJDlzohp2uF2wRTWOOmvmKGasdlUHm8mBOvA7pU\nBBkLzfrXDx9aGxsUjONkX/da1RuHS5rd4PTie6UIWCfJKwUmT8Weh/rZtKMg\nG9XXM3XtveYagYXHP/3p07XlBAeojAfZ+Ggs3N3ZVSFB9kDPXGjNz7aDWvUT\nK0d7rcDVj/wobt3HhibhY1R1+20VFmGdeMjAJeY6nbaXp/ViO0seEeH7twwR\nyYQVvHINDe/bqoX7eRsqgsUlh3hp7SJ6OgrNo8qME+20fYLEVFItRpb2wiQ5\nxu5jeBT+ALrM72jaM94ZKdjq7X6t6vXDcWQlzufqF1gYZdPVPlry81n4hi75\nqeS8yqbrv5/+aS/7WRyG/1oxpGnopp9wGUC+OVtTajVbG7WoqtZzDt8mz5zj\nK5gYciOxvsz06AIqNl+ES3UBuk1uMVhWEr1KN4ruy5EZ/41xYqgldqa/v8u/\nnWrX\r\n=3lvO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxi/eVPlARYeE1OOTGNW6lJIZreLEmKhAe0reuoTvyggIgKLCHKZwRw8Whlu6mBsHu33hkTWaDrAA6kesl/0k/qGk="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.8.0_1596386252682_0.3377088160153492"},"_hasShrinkwrap":false},"1.8.1":{"name":"react-material-ui-carousel","version":"1.8.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","react-scripts":"^3.4.0","gh-pages":"^2.2.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"57fb46a5aedd91577b8a0b08a2776a25178e0b20","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.8.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-5pnweF9rmUBs3r9qqhePXD7UEd/whKWL3Y4LQ30q1CPy1AqocOfhrYIOGydKpc3QGTgx3C68kCmthcPKLDxw3Q==","shasum":"1b6f89198612ced5a78caf42cf4a5b7a1462e367","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.8.1.tgz","fileCount":9,"unpackedSize":45282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJu0kCRA9TVsSAnZWagAAucUP/iINlU04X8FAzsu4iR/T\nu6RH9bSFOnfSVdFHDq+DehH5BYoUd6kpVs+shoch9HrBO5DslASTMspxBrm9\naRWd5WbUpoC+JqGjCvlgyl8bv1FDsMGNjbc3WqbLTVl4o1QJ3fE+wFNkqdc3\nze9k0mbqFxDT1f1VwXYKc6Ohtzwv9J4qfk4+sYi//YUQb2aI3qC2XtJvgmKa\nhl+9x7RiLpWmtTHycN9eAP00b6ct+TOwdJTzfzZUViHY4CDiG3JtLu8+QXDh\nO2VQSXqhVOroezAOvJJGu3lxRju7zQcq1TlxFC/1e5NxmHb48SrYIEIR9dvu\nJy8zo4xtGQMTC+/V3LkwQFba2gZEcEI7XzIdpCkgy47ESL3UpI61CI0Irm+v\nqtt7YNUEnBV/2m4Mooxm/tpvVFBvyQ8UFCIV+ysALvsjDRNqH2gK0cVA01cM\nXtRVm6qdKcEnHgZT5pl2cNJSZ56rG+qX61g6kaXxTde6eXcpFvCGAQ8JDk8S\nYJoo7k2JYd+8jYlah29mVdPrvu13/19kwU09CF0SEojrCN8cFb6EWqCN9rHu\ntOyTVzcs9fP94kGscuo590ONfhVb1/cOkwQ4Gxjegk40WyD58UtztpZOk3sG\nVmp+xeMdYe4p8Rm5ZU8euW3O/vyNdVJ61wyt0waGfcsZuHPkg+Nle/jVuxqf\nOGOh\r\n=Rnjd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpAoHCTFYkvVTQNaNL9SBS3jDDlhVV7r5HmEb1Zxb7hAiEAweN0uAqTG6/UjncWiI3ba81qyCXVfFM2rWgXZPjwKfk="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.8.1_1596386595901_0.22020949477538387"},"_hasShrinkwrap":false},"1.8.2":{"name":"react-material-ui-carousel","version":"1.8.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"12bf3d99f3e788d6cae72aabdf0851d1cdb7ebc7","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.8.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/Vh/8nlcUHrVCdeN2zcu2xxpE9YgPtGEWTsgd/Jua/Jh3fZh6acq0w6YOldJCNPtKGrOaGNgXSd8jkv4N/NwcQ==","shasum":"ea20e0c28c911946f4405e6aca298464bd5d31bb","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.8.2.tgz","fileCount":9,"unpackedSize":45490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNWC/CRA9TVsSAnZWagAAJvAQAJ9IdT76PoxWxaEgIi8T\nAelwhu6RzUCJrEB6MW95pfjU/A4C6sYQvd1u4mjoQiOcMGa7tpy32LdpdivP\nlYTzxgC5gglidvS1wEVa41ga4LBvJ0e4YOO5/1E/urMPBoj0nHYRGOhD9bKv\nEpnOY6a3zc1eUli5I1BYayXrcBPlZpY7PPpneWEJ5IJArFvqhaCDpGFfP2MN\n2LXjSOAvUv0TSWpRMClJhdm0Q2jYfQRcdJ8oZggIlGjy0HbFwgghUzijJIye\nGvhF6bh9wsrBU9FQJfd2hu+BpWu835Z5l4VJb5vSQbxa1VZtNh6GZ/4XPXHu\n8b8HHPHdJwpc37P7TOrjb7iseTn9xMB/7TRLKKbI7LbhbMDYRabZv/Xh58iV\nbAYqzrN6t9TWPuMbyJS5bFExz9vZmfe9XQx0AjqsGBnxBEfXOmV7q4iu0tfF\nGsah8DaVTjKL9XiM2jUfnT0Kym70LDCaP11FGqxug/edLMq8g/mEpwNV+SlO\nkpXefR2mF8tEO4u9KHlvfMVaaq7PRL0FfMr1zQCz9OThHxXdoc7Dx+pKZB6P\nNw+IThqmjiIxjn4WoaJsYJhmAi/06R750/QwoY63QpVhvNA9xQs7vHqh9nTN\ndm+xTO9s6qdGdU5XY8xM0U91suPzD2nHhYIrNQK42wzf6NsDRPbPte1EZoB4\nFgZ3\r\n=EQRD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmFaaZ3qxS/kfmkL6IXlezAig3font2x6WQ7IjTqK/oAiBQQiAYQ2x1wWUQ0oH9SiYK8q5EhTRvjSqiNSaBXhwMew=="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.8.2_1597333695121_0.5186814423781179"},"_hasShrinkwrap":false},"1.8.3":{"name":"react-material-ui-carousel","version":"1.8.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"ad44041885cb7108948cc81a0ade2c0535dd529e","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.8.3","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Fx+uqtOC0ha2PTJDGscAtizFq/UCZ7O6K9ybpiDdOkaIlRl5SVnaeaEOfCI+nAGczDibbKdkbPEG5ToPnK0D2A==","shasum":"b25096bc92e09344b9933daebb457ad918899e08","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.8.3.tgz","fileCount":24,"unpackedSize":1240326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTdyQCRA9TVsSAnZWagAAc8QP/1rb7EYhp3NrppIKIkZj\ncjYo7xvo4MndGaGi9cejYRM8Dbad4ZGD+nEdKeTZzkkKELqhnt7h96kpt+ZH\nwIjt8QG0t7sU3l6zvZ8Kaww0/kJzmonzyFVjSLWJr6zDjZVH1nCVDkMiStTJ\nK3R4rX44DW37NTr4hqJNTtY0+3/GzQfOb1kwgoKfX1MSx3FN/tPbxWy6tXhS\ntBQB9nCKhGwpqc0xOm9Wn+B6OONckoz3bWzb+6a07WUGh8OVCUVlrV8jX5tm\nWQ4n6CIaUN21NO5SAW7hoYHmDZJkCPa9uaCf6jrvb/G0MzL9gU61IbK2gIeu\nODM7U8GLbvRpI4660SN4EFjwZ25vtFRSYn+jF7oMPWE2x+jPqUBlaVSc6y0b\n+ao/3jWv0uwquu4jDdYv0WIopEPjcNZv6RBc+xwkH3mU4a4+THePDcBWYjiV\nX36MEsLh+6xyS4c+O2CBYID4mjyd0YMeG3tMS/myr7zbYrKfNHDO4HGVlvK3\nbqfJ11mDMF2figzDlonOwcEXCgj5mSWb7tnneN+IRX7sB6xuaHmec0P1uNFw\ncrot1ctapZaot5WhRAuaLOIjx6XTvJnip/qLmODro9oJpOemkdG9dePnOZL3\nTQFOo2v1V/tbLn6HN7Xc/IaQd207JtOj8AnnsNJMd/srWI3wze3IX0IQ8aY4\ndbny\r\n=zRJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDyQC21FUWxzVqCwBlCh63vUwrIEbUzjNnjymxsyGlUrAiEAq3ITJ+ekK4l5hZQyIys4hBHVirqmLbOWd8sZyBQD1EA="}]},"maintainers":[{"email":"georgmali@windowslive.com","name":"learus"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.8.3_1598938255851_0.713661266543866"},"_hasShrinkwrap":false},"1.9.0":{"name":"react-material-ui-carousel","version":"1.9.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"677db2be1654d8bf6adae7ffb3fb0ea6050eabac","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.9.0","_nodeVersion":"10.16.3","_npmVersion":"6.14.7","dist":{"integrity":"sha512-JDwocL8A07X9Uj0CFZpFwaTKBOm86ZJvQ+64fxQIy3bHsm0ZYet3jXzvzHAh9dsZk3djZJVWLdQ7Xo/fkqHeHA==","shasum":"ce8b09dcfaa5e7ea1776fd54e7a65b867da69ca4","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.9.0.tgz","fileCount":9,"unpackedSize":48113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ5WgCRA9TVsSAnZWagAARXAP/001M/64xThbq+hUzmsC\npWam9IWBPukXk4JMhXjeaH1/F25DtwUPp6AkmWLOi+OKE0aYGS1/Sm3S0FE1\n2Mm0w3JUGWlhcXqGBzFl2U0hRmOpL5USxNx3HdQNz74q+0SN09NNBol03OYO\nJSQPfQPgrbb6Mojo/+2BFzrkTAnw5FBCz7F4cnowrESbz/bA6QgsfPSd6lV7\nqSqU3eO4eHOxxnbo9adct++g3DRmDtSIa23SlRJN6o3pE2+QVLLld1AvQZPU\nW6Ideac2XQZNentE1+rctGYnIn7pTk6m1yqfi4IA+amJZ8kl64e5rwZdFysB\neO/1daLwuW0qitNCKSOQxdVOwisrhJXTM4bALRmoULjOk4WmTSkMM7lXF05X\nQsQN89Q5dPdlwvyCQWnDforIa8C9deTqm7WRpQR+nMIgP6tGCbOAu1N50IQK\nkp694SyGN9AX7xb3acsUykL7U8stFUyIjlZ3eWjjyuWywrA0UpsgDuLMHiaY\nbyVKtQN5lkJH9lkprGGX0pe8hHO9PjyUgSCTVXN1GXR4Wc8hploHZwnzdtKc\nUIBRS2Bg4nwTi6+ys/lpn5Frc3h3zvoD+c68ZttpLAIley+9kPFYtiP3lWIz\nvzph3DlyW5AjGh5rV71JSEl0OQjixbmntIdx+cDjsTTlAcJa/AXODtSwMi22\nwbM8\r\n=MYmr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDl3oayOpl3Ag9AHgRywiSqUud+nBwUtaLEcXG77UHpwgIhAK4LevJ/4h6lx3l8xpSCsaVaQUNFS75UclU5Y6YjIU8Z"}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.9.0_1600624032311_0.6298617632408587"},"_hasShrinkwrap":false},"1.9.1":{"name":"react-material-ui-carousel","version":"1.9.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"677db2be1654d8bf6adae7ffb3fb0ea6050eabac","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.9.1","_nodeVersion":"10.16.3","_npmVersion":"6.14.7","dist":{"integrity":"sha512-N0iosmYmn15jEqVmf8Ucc6ofc7aOr2ekNzDAr8QPMjtWxdRkTaNChlMX0v4ucfaSi07+v+dsbBz0ZyTtaZwBqw==","shasum":"f052e9cfc9afcc1f8f75858b9d95fd462262503f","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.9.1.tgz","fileCount":9,"unpackedSize":48574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZ5YsCRA9TVsSAnZWagAAcrEP/0/oZGN4MduY3lKsk0GX\ny9r6UKXcQzqKKbL85Mn9NyWWWAQBTo5eAHbfCiQ9ojpYCPkUr2UUTpuoR4If\nyTdMbmiH5QyNglDZkVqFPOsNFq9v7p+NME0F7hE9SfQEEAeymJL3cTKBL/cS\nWFdRIKmJI3CKgQoNQcjDkQvZJEms5YDspCKpwDPBi5YT6FIMkWG0rcYjfPas\nvIhK6Ryz3J+VnGbRRomImGM0DTCK9ugen9n121HvnxoENfODITMTxQzPRA3n\n+Gs6HZszJ+otWWn2I9hFXXu7slDXRRfx/3TQV3IzguZknMAnJvHxESoIN9EK\nOlSOHyhfllCbl4dalxXwINzW2qqaeU+1YDhgBsG1t0ygS10mzxfvASti8zfc\nY0wHdFDbNkuo/5MXOGRFkrrIVpnUbv6TuRFz1Ld8fbOP1yTw2gBuoQbqHZ/k\nRlUKbuFXWJv+Yxlj+imOYiKSXJjqFSUyTkLp5K7c5gRqNlNzp1WTCk0XM3HF\nUwlHcJeeJ9vLQhb8M/V5vt+JHN1ekVjnU1cWLyirSk2iqWgytUlIdy9EBfY6\nKStYVTrJuiBTQgjQ6qMdWxlsWZK8e2r3Qonm0yIFkTvAcLZTx6/ICzoK6D5a\nOnNqfmDfnYXoL170PH4AyfG8wCLUD6YyeBVLsFy4TcjJT9tyXvykwkND+zVI\nwqOL\r\n=PUMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYZO7ICJnNZVUMwxpgRexCB+32UcyZi4hxgOt0SgUXTAIhAM2Aipf1Z0HLi7wKdvDNk8y9zWevSlSOtyBPA1IySU7c"}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.9.1_1600624172339_0.5249238549279158"},"_hasShrinkwrap":false},"1.9.2":{"name":"react-material-ui-carousel","version":"1.9.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"bb0214fdb719899cf00137f67a6174891e1116fd","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@1.9.2","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-3oLn4SUfKjNodQmrgNgrz/spwQY7L03mKFsl3zF3C0mk5qb6CvMp8dxSRJSxaiP+yzJCne/7Ysq/Z4hpN83Xvw==","shasum":"27fc67244ef7864e323d947b8288fb3a382f74b6","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-1.9.2.tgz","fileCount":9,"unpackedSize":48666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaGlUCRA9TVsSAnZWagAAEN0QAKPNkWDDdQSLUo9s9BI3\naI6FfyuS+wJAfb5pSiZtFdPCgv7iYS98fhvYjclLWguJzI8uadGDbjKHO3TX\n7f7IUFjNxBrdjy35EFQim5uKpzTWUkGNTrRWfEStOrrHl7dEPn8Qvf8gO+Y5\nH3i9YHuyhbDFu6A1iLG9tWbCre6b4aneN7JvEYIFSOAsVSWY/6n6KZgRjoXT\nPkO6hhS2Rq0cqab1vPn0pVNv6OprqVCRwGB859O9sdcLGhBUsxFA3BRPFHy5\n+klaBTt9ptxhxAZlft8UF69ogOtXs9uuHrbv4eSzNAwqmUdsYaNtEklTEmo4\n23KC+FxAXT6n77rVjAaVdhRxGgBIRAZBaW4cLI0fbdz0pnfFATaPad0oSyl/\n+ytkhJhrhwhcpBopZ0T2Al6miEkIXMqxyLTOpRfUsL4nBcEM2BEps7P+X2zU\nCLMaHaYTO1dhn52ElKjiIq+1cVzXi9B+LTuXaMemoPR8sPAds5695TMtY3zd\nhu4/dvzYgYwDUfzOulob/MiRuQUshW9IBBke+S7ZzazzoUQPQ7kWv7ZpLSDl\nqI2ziOmebG3hF+uxmL57zDNMddlkaB9OSLYNARU7z8mcQsVOrsis/8N0eJJg\nXGpLNjpuVolSZvktTIpGX1JKsio1J6Yj7WjGsI7h//a19LAXAppE7Vns4521\noXhU\r\n=pogw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEPLecTMGqc6xLsxiWAr+xV+l1lztyvWDIeYelI4XCl5AiEA122vf+bBrQ+Ds8E+bz/vyqw/WkP0Tmw82ku9cMHNq44="}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_1.9.2_1600678227725_0.7019536404574991"},"_hasShrinkwrap":false},"2.0.0":{"name":"react-material-ui-carousel","version":"2.0.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"4debe823cfcaaa69b1cb8bd55e92aea7a85e86e2","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.0.0","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-xk+caPoj8oS/xeHK2ntEksIb0mTkQhircPiUKitAhu4QUzMmUzdEzIittE4QPN3tSjG0cnpQumSu0uuGnLjLgQ==","shasum":"bd3248df8489a1df87e9c1e3c50d5f81f3e82410","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.0.0.tgz","fileCount":9,"unpackedSize":50358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaYGSCRA9TVsSAnZWagAAbE0P/i++N3BcQT+HiyeokslB\nr28Q+l13Wi/XSgTi67PoXgddyUS5bjaOrrieQ5CEuXuXE+hp+kcBLV7feJxc\nkDhnj7mR/kFSuDodCsXcl3aC/PdtC6EtsqML28Pd2peByigT3OCasdVOGTy7\nJwPUa8TIR8P0b/J24UoDBLevPU+tZAPp9zuuktcemLcPt9AMzBy4hGN1RLaW\nFkLfPoWGKVQv6RkFzpNt56hb39T/1mV41oI7v9mMsangTs8pj4qz+rgWekXr\nfSghAJbh9vrHk7/JtakvB1e707gg3pRizRe24Es4mQjvaZwi9JJms91gPsO3\nimAgOdGlrxTjQuHyg+5ZZrah9Rhb5VOZ7W/nI+TbHVQAu8QqrWulF3kxw658\nwefG/naPUGAv8hNoHi74QhMGEdFRnt1weTve5LNQKSU47o22YfCjpUg2lyHo\nNkkaljcamp03/kkH1TWz/nooLq7OLWLw4G6+M77CE380uBUJX22gadetrqL4\n8aDitgKMB64FQ7WxnAiExoCz5ehKaZdk1IZZAw0IQam8kb5pKYbmoew3t6a+\ngmjrSMTJ8O4sVFjzyjOJPKRhhclj7UM54UmE+fTea4NIiqW7hIhPkR/wtu1M\nVbZJToH+SHRkFr/cU2pqQrL8DbUn0Ry+29o62OKkSBGyJVMRCwnvSsUa4r3g\nIp9O\r\n=v6ip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8SgknR2e/EEBMml7utiK1/b1F9Jq97dCADXjre7jbQAiEAkMUJ/MTbTZG0ybzTP75seAiXlZeROZX2VW6uCkhhVHY="}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.0.0_1600749969511_0.1877152063083516"},"_hasShrinkwrap":false},"2.0.1":{"name":"react-material-ui-carousel","version":"2.0.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"211a53e51062d66a01c7400ca1ab8c59fb50ed03","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.0.1","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-ih/xW6bBLwFMBph2ra5VBsJKDkIeaO55F53CGnXGKMNW/BN3FIh9pVslHgbBY+dDKLBT0/J6IxMJqa6Q/in8xQ==","shasum":"261936f74343c70190b834fd954a686f186d28f2","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.0.1.tgz","fileCount":9,"unpackedSize":50354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffBMICRA9TVsSAnZWagAAyGwP/iyDfAJ4qenscK27xWw4\npqy87tvB5p/8PbrVdPLQqYwdBYoKhoHXytsFn6o+FqTtyDQGUWAdzayPvgeM\nWXhZqZoocMj5NqzeDRgn85lAmaYuHeg6jyxWC4GBoBWShF3EhyrvjgN/iQ0D\nLkVSidsMwmIldKPKs88fBv5ld3pdzMjHauJrQ90Dqb0+yprz4/QuucSxWP1R\n/yD2ypBrq7azA0rJMJGavWwnbjmVoBPIbo7xNC4Ewhj33NPPgc2mm/e9VDSH\n+IxuwkK5i+zJPWFlortPapCVrUhtPEtF3wAJJ6G4aMtPRQWnz49U4N5/ar8Y\nOUvXScFr6eMY6iDsMuzeXSIa901bUK833lD9jytiktdbSlLw8tnfnFjCC0Kc\nlNI6a2uTaxK7DunbRNr0o0q3CKz78GEPVsgqsvX1VsJRmETbRdCIznJ77gep\ns6T4BNxs+Bcx8Pwyf3xajhBUl6Fg13W3nlNqlgb/uHZwlMepnnIE0PQwyQdi\nZ5iT+ApzuhLWRIiA2FFaDTtJbAARUkE+6mPdKSPhlwyskWbD0ITxppoJ4ghK\nhLinvWF6PezStAY385/cLFR8xWSLtT+8kGfbOFxigyOHyxGX5If5i+dOJEW4\nroPteHfdLvDSX3XaFbCxvADe4/ws4TEoSRGdjtmDcF7XGRyOWZ4AKew9E3UK\nTFny\r\n=7I2+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICilMCFY69CdRdjosTTxBe9Rz/ZBwhKuoNruRImdh6jZAiEAiTzStsj3CX3eqrpEg9ySR9qEBPh55OIIfMDXAxZ1K04="}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.0.1_1601966856056_0.5678720856695469"},"_hasShrinkwrap":false},"2.0.2":{"name":"react-material-ui-carousel","version":"2.0.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rmdir dist /s /q && mkdir dist && npx babel ./src --out-dir dist --copy-files","build-unix":"NODE_ENV=production && rm -rf dist && mkdir -p dist && npx babel ./src --out-dir dist --copy-files","demo":"SET NODE_ENV=production && rmdir demodist /s /q && mkdir demodist && npx babel ./demo --out-dir ./demodist --copy-files","demo-unix":"NODE_ENV=production && rm -rf demodist && mkdir -p demodist && npx babel ./demo --out-dir ./demodist --copy-files","predeploy":"npm run demo","deploy":"gh-pages -d demodist","predeploy-unix":"npm run demo-unix","deploy-unix":"gh-pages -d demodist"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^3.4.3"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"f5d96e19b5daaa3a9a213cf8cc6c7b3a8f88a9bc","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.0.2","_nodeVersion":"14.11.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-BShTbZAD5EGlntrg7z/mlH+KtpQHMGQNSN0MJupELcTwIyL2R1FJom5QsBANhiWS4LxPS6zszANuc7/M1rKkgA==","shasum":"ec1ec80c45f3b9042e20573e82fb5f51a3d8f82a","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.0.2.tgz","fileCount":9,"unpackedSize":50338,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfj9RHCRA9TVsSAnZWagAAXLYP/3JtInppatajXi2Lj/9K\no5b54Au9INLmcJU5ZrDK82tCBiXTx/Viy6eLjlcwdaEAjd0x0+Qw0ib47dqA\nR8mLwP33F2kJkyj4SL97Aap0knXMLmg3qakMSjyjCQtrzHhGi14wFkBDBrao\npuecwS6BXvk5iNVIQA6QfLssbIrPR9AUyXZXDIeOAYMksdB5bsafegljBm8x\nGTxHnt9xn+Zl2mDvUmB/V8cV8xt6jC4KF2iW8hG5pKNXKekyxIHvEjE3S1T1\nqc+asiFyl3UlpEnbfqdAr531O77d2yfXtdd9J5vHjGQ25kIqCyFGBTt4I7Zu\nid2a7HZipu679A5fVwEWpld+CCkaEvCkpdpMXQW5W8CGwjGgADgn9XjW20Tw\n29zaQxmysXZoWKh0oAPbq5NWZuxgKi9QYSsDPx6kOFAJTq60WYnW7DWxhqRI\ngPO6MDpQdhyOv62Qe5Nx2fN1ddlQUttJeolVV0fN0qfrle7d5jg1538N4o5k\na3AXrtz1Ic6p7INFzbCceBDXauLseOTgMfK/CNvQEUXKnVbhy2kfpQDibagp\nRqVddL3mgab2Pzz04/823c02z2eyg8BY1RaGPHUtsRjg0+9InTpDbdF8KukB\nkr4dlGPqNB7JY6VNYDEz7s3OiEr80y4znY34vxU91cD+JWNUYRNk1QO2XfsW\n88hc\r\n=N/se\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeourCNdatVvmMnBGQdxFiLIk1WHv6CARD1XumGtNC9AIgXzqrhTorJnAXK0Djbm0sWhnXxht1z1u1BcMmimGSKBU="}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.0.2_1603261510849_0.8009678456238485"},"_hasShrinkwrap":false},"2.1.0":{"name":"react-material-ui-carousel","version":"2.1.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepublish":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"f16711b7b27ee50487dfca77b33c8e327d803d39","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.1.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-CK4YIXmI45f2lMdVw696d1AedAek+YiyFVV97s6xAee7Q4LVrzk/yv1of3c1FvdFrmPDuOpiKMbjY1zUbTyLyw==","shasum":"eaa8e1cb978187d65d5c2bc50fba504263519d22","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.1.0.tgz","fileCount":9,"unpackedSize":51141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbCWCRA9TVsSAnZWagAA2HgQAIXS6k6zzKj3gjZOQI8o\n96Z776aa2MgZq4i/sqPuWDHyHnvMWZSJHU9gw29m4BZ10TYxgje2r54oIXrF\nEWnIPRhAI8r83BhRPqdvFZDpxQ6jB1Vz2aKrFO/n6OnnWFuS8lMYAJ7sodHi\nC3HE2BLGDxlED5C4M2qa6D+vGjMQ7mxDS36RtJMub2J0sRryK+8fL0x/AAnx\nETVy8JfDYd3KFhcB3mlpRHtzlqS9TvJ2KOR0ob5QLpB6n6jgflMwmjq4RdPG\nTjZTIrJxAsEsAgy0xdXQ9+5MsN1fFORZrlYZ2jQDExHz3Ug4uCnRuEPesnMV\nED6dN9d+J92b4YJgN1+IjNWb6e7qfMirwziXV7XF8CURp+T4Bmc2JUPeMu7T\ntjW7JY/BjIry0Acq5jrgoUR9g60rCqPqWGvUKsGBkwGzJzG2vg9+stPxIgq0\n0rKZ7b258v/V0lKqpXSvd2NDW7MJq9KFqA7kTP+l7HlXhFy3C9XJ2CPNKwZJ\nY1LKSLocuRBgIV9r/27JxrRSAASoFymxbEtohLrhrveeilmYdKuWZZOvAdSc\n2We17UAjRqe5iRZL3L4vagJdYnZ3biqIoAZgERswHsqqroZuiX24aG775sJ5\n/TwW4tsjI6DNC3BIaaOGdp8NEcfjK5YXK8U4w0Gb+2dOWy5Ort5BIdIkMYf7\nWcGi\r\n=WJAC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDf05IC5cg5K82AYIUHphpgvrpoM8PObqO7RZZJ3lHNSwIhAM/4bjy8CPIYYUtzzJXGHfOEGJdNBM7iOeIdb7ggKF9T"}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.1.0_1603907733533_0.8122587437986948"},"_hasShrinkwrap":false},"2.1.1":{"name":"react-material-ui-carousel","version":"2.1.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepublish":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"b610b4b4702efcd6a3c3d453e802b7e6e02022da","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.1.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-BFT1y6HjJ32mua9KNRSsP5SCDOZnlHfuEbfEzMGExG1/SZD23SYanhiZdfgYW0JGsfbcm+iQqpdcQR0aHyAutQ==","shasum":"0cef2f63b4172e1b5464327129562c5b951b3c8f","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.1.1.tgz","fileCount":9,"unpackedSize":51505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTACRA9TVsSAnZWagAAaBUP/0r9OlD/GJrjSVur+n5j\n4cesN2mdgTNJQt5zOcPlBd05Wq+YD49erzqtAXXfSFYMXm6nmhhUCbHbllNx\nu+xx+wfExokG6A1XL/GxN2g3abyo7vqyNU7dD8v8CpG/30U573lQFpH1efkn\nxXjbvu77iLO157pPQ19HHBzUyLLlp8yx+tFh1RZQoZFf86xZdREH2ZysjnLZ\nCzPW7ppbCetF4LuoLBHFaWpek1FMv2dJCgY0b5qA25OeNl3XxKx8nGWxw5Gn\nEE3x44gNzcVsGSmjn1E5jsnnT5r0IkrH0Onk1IeP1kcp+nP89d8ec+PuVNoI\nUYWvImTJkXRqUyFR3odTgzZmy/+x4kxwP0c2Ug9sZTW87ZvRe+ST11Y92tBW\n03NqVppwZMGGUxXat1sByQQjQFeS2Ygc+rrOYdwZTkDHlPVFjy3yC84LsbBT\noUMoRvABBkxQVwVDvAvOvUHO5QjBhn4OVt35fmoaaUODXwozsc51Id4381HH\nhKCqkdSTQJmWE+m70Tzibrle2TYOk2njJ2qsjFBJWkmoDv7UmCbZqD7hR5Ac\nhvQR9BzSRNsbKA5UDQISZwOWihs7216nUS7cJqlOvGOqgTE68PoXAA84wQel\nNGrrg4V3Z85nMQebSKNhc0NWLqXe9Jymomudpd2M4jSgSvEUggkQ+Xqi1N07\n3OEN\r\n=wA5O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbNBxcAto4k90OpdgG4nDz9BAc3lsS7m1IIwpgn/9qAAiEA4h4PR0mpm+9rw+vpl3QsNZGbBN1zav/4gHg8QjEDTOY="}]},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.1.1_1603908800233_0.6918453845548698"},"_hasShrinkwrap":false},"2.1.2":{"name":"react-material-ui-carousel","version":"2.1.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"04311bc11fe07ceb7e6e0a8a6ae919ea1775f8cf","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.1.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-84BWvZM+Sl/0sposrzMJcl/yVcEOgYK9BmvVNLWv2RizaIvFUudSI0vzGPVh2q197Fn5LSxddPllbWud2ioMiw==","shasum":"9bcfc8fc22addb1aff76ce7d0a7400e439cca82a","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.1.2.tgz","fileCount":10,"unpackedSize":56382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/GCDCRA9TVsSAnZWagAA+HEP/jkNoA9V+PLdcpnAkETQ\nBUWsam1EelJqtd1aZhh3VUQ9MDwBSaAXK0pZLyfrbrhnI4HFPfXdcMU3XRmB\nyAJvYsQQfafL3IXh4QGsdfYS2P0NKj1sHY3Asqqa4lEAOgWOINaDNOVeK4jC\nVreDyBRtmB6bIY8QEJHKHRm3KpdkPU8cpbGvH91JEBrEPj4CzPfTzDzuWlwF\nd7KPuyj2PolA/sN50BoSzvPMAimqjra+GqlMDFtJeRXEf4n0uRQv0EXn99WI\nxRC8OcKz/DzX2TROrx7oxhRhcXIn3GZIlCnSrtyfrD4Kyd57LYHUNYuxeFKh\n6Z/ZsQ5AEeWbYVG5w3jACtIHfCzSWS2m6HnYgwlOg5yreCZwbSxHmf2woMYI\nvmjTFW8kJb2IONe/Sinbdy3ZHS7Z6WbtSdEPBmi52RPgLaHC7dn5BzFTqKiE\nfovxHbqQ5QoiYO4Oh+y3hWXaiakw048YYkBSwbbZVHJKwyZZ11qKs2817Q+/\nxkiWB+hVWc9+7RTKSGrbI5AJTquacDjOQKxkwTr1wHVg6r7nCvTFvx6GsY1F\n/Eu5+bDTBhkkCNzLtlYTZ1fJIQ1qlzV3IYNZjXvDk0K9aMW7hYTZbKoC3cFG\ncRugqU9TihZDd9qHtimEIhgERkKcP05kuozMF/KkeOYpWZ3ceyvK7WRAhY8V\ngOga\r\n=ORKS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDG9v0JVHQdr/W9XPzawVhMRCDiQmbGnFHMb4P1v2jphAiAHYhvpjYwOx6m1PyO/t13dzy68aqGDzQun/iSZxbR9GA=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.1.2_1610375299037_0.28492426328269405"},"_hasShrinkwrap":false},"2.2.0":{"name":"react-material-ui-carousel","version":"2.2.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"8539a8a2f2e57e296882c26ca2d2795734df24a6","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Do7OTtdmCCbznq9n+n04x7uuChrO/HZU0jU/TLFLaai40NxA+GSND0Epjmpv6WHnUoIhwHWpqpvUCrK5ig3itQ==","shasum":"f203b2456e7805d049de11effa050a6120d2761c","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.0.tgz","fileCount":10,"unpackedSize":86091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN5wJCRA9TVsSAnZWagAAl5gP/1d7VE+kYVJ2PeMRXBSH\niHiGq7vBq91JI+lsPKEpmzooRycRO09WTk5QhzsAUclG4JGFZ/HBPnHFvmFL\nZJmGZM5BBhcg66wb0mkbcEdr9mO7sB3Y9pISqZon5PNLuDh8iv7bv553mSg3\nSVPBY7uHBJ//pypF6mGANvUupYAME3xRQzVJCW7g2ZETUfXdfCHTfasIpEIm\nrkNLGsTUPvKKqGa+j0ZtnHBQlX+dzBlKVI9tf4geEOUkc6UNLzeu1ULtFl+V\nVAHOyGBHe8Z3yIddWe7hghvVqay0DkhFFCUmStEVEPNm+fh37TZ/Uks/G3qW\nzX6wj4UB+R0LIKQqlIbXzfrW6CrWL0+tQ8VWeY+qZYuUfhUaxNlIEB17HV/a\nDM5BoxFxdLPfaA3CeTon/0Bt2/U08JENi5zTOTRC0ZBXKGHzKyQbC+HtQHJD\nXmD7AJ8ImcgFgXQkzTMxze41nD6qnIycIWRLxWub3kOSpT+igtngT1Whor0k\nMvWZnBzpowvpnbPWqf1eteDcjTxVTVOeBgWXjkeKNUwxJZpHsmzLxu3FO5cN\nCObCzbyYxnATXrYlTZ6yiHyPKzv5enA0Jrv6GCUjRVHsQPKLJJKs8nrv/43E\nImRxvsS0JZHMYJBQWmjW+V96E3c4EaOoGgBvzXXV6RGCYLd98bCgdzWKxEVx\nqBLN\r\n=N89p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI4maX5YkZr0nuU68oszgFX0HKpZa3ClK4kVQaUabzjQIhAPRcuddnUUfGq6oQxjeoJsamZPDvc5kXq+lVhXVgUG1H"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.0_1614257161251_0.4071982599973676"},"_hasShrinkwrap":false},"2.2.1":{"name":"react-material-ui-carousel","version":"2.2.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"a4096ce86e434c1386265306eef56bf9e964935e","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zd2bNPtCX0zWq6dlBjW10jWxSrpO+VSrl2tNkTU6tyfza5RZXDAPOF0jp4Uq4bgnfonPdsKMZvgr/3dvNOgywA==","shasum":"fa2d49e2cd245242c99830754fd9797c7f66da51","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.1.tgz","fileCount":10,"unpackedSize":86920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOMqYCRA9TVsSAnZWagAA5OcP/i6ZesIJOojm885oSGZz\nXfhHXdBI9HkFBbwOBYtpJym73+RtsYPTghjeHZGgbSg3o4vA+XF36BUnT2OO\nr8YVs0EVKv/DgsOSd80wYSBzcIMMFMR1vb17qHI/3ZH2KNVTnW4QOzjGtkgT\nXK63VNbf1/gbGmENWsu9CHhR0wikwfib8gSGjqJ9qoS2eN2+Km/BZWuSEWek\nkNrPZgYgAEpORZOBOIqz88VGJZQOvE69BtIzrhRlq1DvbnixOaIta2aB3ymj\no3VgJpvCHqUhawt5m/i7+OBQhl4yRpSI+U/EhrszZvH1/nZ8i86Lb0l3TTp0\n5/D02hXNvsRafvNudnFy+rIpdKmWfoUOOSbkFm+A1fa+fORvBJgH7J8CfzxP\nJFl55xx/jcf++b9APdWQplQfAZ8mP3ImGuANcnpLUlloHocLoubwoEixiM0Z\n72IHefRMmCnTzVKlcAumc3EXXrN8goxZy4jkCZNQVDq8QCra9K1mTBnF1XyF\nLtbYn5nxcoWW/YKPG7mbOryOlKmJzD2oESOUD8k7/Adw7j/WuZ5CXpfDdUY4\nafEtJw90FCnFK1f+4cKw+cQHOBIhCpb93Kp7G4zlPlx0mBNJ4TA1s1mZdnQl\noMrkaGsMhEnX2I+22/WDNH/HHNhjN66jEbQAugu2mT0uXqyCb8w39yxNyW6U\nhdoi\r\n=FC/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu27cQT1Mi0ucubWAC4MBEQtuBy75M6tfRSjI1kDl7HQIhAM9tcFHZpHEJ6rCZ+StHBWQWMB+vjjou9rRtiH2afy7g"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.1_1614334615765_0.11231536834155831"},"_hasShrinkwrap":false},"2.2.2":{"name":"react-material-ui-carousel","version":"2.2.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1","@material-ui/core":"^4.9.11","@material-ui/icons":"^4.9.1"},"gitHead":"4374614f01c8047eba2723d69311738828e0411c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.2","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PnCyTEAgUQ8DoUZCgxiCkcj0ix+W14gQXcCzJHTSksBfZXWwpsG+SvF//UDb29vlja/26pFjH5vhSKSm3yglYw==","shasum":"b1bf84a6a7be7c301a4615e13b7c0d3d7b65cd73","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.2.tgz","fileCount":25,"unpackedSize":1280759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXY/BCRA9TVsSAnZWagAAGEUP/2tc6lolD1sUbZ4zvSVW\nBfhCBCNaa9XjG/dRWu6HXMxxh6PtCuublrzoXD+eEzHRQxbo4rCTDIPBk/JD\nT10rbRmLPL2Zzci0q2lZANuEhi8QnP33GzKCNFxEDvPCBJaIfkI/3wlGYv4R\nVwn9GSzGFTAJoqKVPGybqU7HSeh+UlNQyiu2se9uwfQk1q3c2KEZEAx1So3g\nqJ2urdldRM2GBexFCJY7NrEP+WdwW6xXcUIeVS004D9i+Q/tnZJu5SEZNAxP\ny6X8up+1L02eqtT7bZ+TS/m5cmQVZOWA74LwfoV78O5hAep1aUcbh1z1kupu\nGB9OooVZVJoCqd6rBZaat6fezEYQtDQDw1pibUFsKELKDqQnDun7Qn+lgcTj\n2VSIBSjVOWzt5jB/eR18V4Rn5UAGV11iNrnIOtCWGHh0TnCkUwvXMwto5HiH\nv861lpD9zXJANdSSY0rhesqSQWnu60Ce3dY/2L4nAG+AizH4dVrMGuKT7zeC\nsP9u3fkxF6PkhhAnGD/iN09+TWhoJGf2LDh27vodtvmYDLKV6+hJeAVqHL7y\nGizxs65zFRYO6d+OBUtfG2chG0GlA0ohWUUP7hhPXmyu6vgi43SS2PaeiijH\nWjwp3u9p7Yxx5SwzOpzRD5Wpv6zImVMZmZkLt6aCKVNU0ps2fvOfGw2b9C9/\nQ/dc\r\n=4erG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWwQy+fNWQMGPaD4ExIlmsFJIXLn2wbm/6crTH/NnPNAiEAh3HfnwZbbM0CFo7Qc0IzeXd+Nbe6LUA+4mxbvSHWfjA="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.2_1616744384336_0.8327178000006292"},"_hasShrinkwrap":false},"2.2.3":{"name":"react-material-ui-carousel","version":"2.2.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.3","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"551b157edf8084649ee0f9f5412dc77f668c36b5","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.3","_nodeVersion":"10.19.0","_npmVersion":"7.8.0","dist":{"integrity":"sha512-+p1Qf9FlP8F4WOFCO1mFzMs080vfBiQ+r3bdDSEYPyqwopatlDpQviB7bAWJlgFVe/ul57mpnZfR0wbwVhDyCw==","shasum":"d01f6a3d5fdd89ea26df4976916b49762081cb83","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.3.tgz","fileCount":25,"unpackedSize":1280759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcAKBCRA9TVsSAnZWagAA2AQQAKEo0WrYmgEFYIO13vq8\nz8qXR5tcMn4GU9q0gre+9l4NaWhDbz8ISzuf1fXO0m/FxTCJTssaeYjv/Mbg\nEw50lTL0fm9vmTKf546mqIxeSZrXz7FGu0wIi0dFntT0J+xoHeJKsSDLO/U7\nB9H8TAIez3Oz/xR5lykRMM08d8uJ2IUb042eva+BVbiCVYSLWsemf59gGjMO\n32vRvyJFv5eSRW+H1ZA3gIYcRqicunLfcpll4fHoyVXUggwNhGWmT2XjCKaV\n6FBL6iBkhkiEB5GHR6aJIKmu4h+pTnfJPfyvnvV93q2odwEGlCK4QNTcXbOc\nHFrUVq3dunJZnJon0woWG/wRgAJ+A9q37H/u77sTC8Err+A8RAg6sLJN+NIJ\nE//3mWqw4/fr8DB542IRwM87xvbWyGx5QFHKYKspqo+9ePOBffZ2+bb3NapK\nGbZs58umYLl56SoqrsvFf37Do/doLggxmYsLA3YMM4NbocT2Ac0cGh+cDeHQ\nIG4cDlxBCl6ByjmDHWKHVrSyciawHuCzlqUIf466D3zr1f99/6Hsp/HObFO0\nXrNPeUQUNQTsoAJskN4V3qDquN9ii4beNaxdQLWrI6It0cqRgh+mdxKfKig8\nKAh+crRUVd4zF1Aj77KTRLTkNVZ9kZBWIdA3Ipcb7ZzlB4xUkxPZljGbsTw2\nsfre\r\n=OzoA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKvbNVvk/SdyywY6vzGAQ9n0GVVv/NULLjLolfIHVu2AiEAiyNKfF3wrlA5WmqkbUeU+vcsxQBee71PQeF0jJofGOE="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.3_1617953408932_0.952000137272583"},"_hasShrinkwrap":false},"2.2.4":{"name":"react-material-ui-carousel","version":"2.2.4","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"551b157edf8084649ee0f9f5412dc77f668c36b5","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.4","_nodeVersion":"10.19.0","_npmVersion":"7.8.0","dist":{"integrity":"sha512-yQWLEdB46bBMbGRlR6c2HCEerKzS3cSSZo+8dZOtwXDZluFuiRgR0wPozt1cWcuxzFzC1u7YZ6BVB+8fyVBd2w==","shasum":"874c5571482291b0a562f38918a7639edefc8a09","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.4.tgz","fileCount":25,"unpackedSize":1280759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcAOXCRA9TVsSAnZWagAAT9IQAIhxagpnnwocNFN9Ah8L\nJ/GMZRxvM4Vmot44rKFxC6lZcBSPaVyyxgKerEbzLunNSl240xl9rEFEMqtL\nVsYb4VpokdlO97MsIRx2AnulGQ/GK33e8ZGkOqLRmptPozKSJ8tdO/YNi0PS\nTwyGATwni4Ywc8un5c5uA+yJzPG/Ynt04QziTj8jkHIWKctevzqGrukXECXU\nLgAR8rZ2SfozPMOS4FZX4QFM0njYRcfSDoTCoUYpG9zmd61rDO1fWiX+IQwr\nUuTXmBC1V1ZbH8zrXyCTWTq+Z2KK8YiRaahOHASNQAruXQjc6FDl+enwFRGA\nXwi7j0AxpwKo6z7ncm3JnjfvV9VmjpZZPRHSKCpLKwjB2X/Czy/JPMShYLF7\nhnZL3eyxb1EYHZy00Cl6+dk5UChp86fjE/ziW1EikUP46NqYIac/6IVX40Mt\nVopzx6XKZ0KrxzCQQg4/slbgnM4zaOkDGs6Fnzb3CxnMrnRdOzXF3kSThcmn\nDchYXnAq/qOFoFto1OBd01pI8yaRBQWcSu+yU4tuXrCpDsUlczoq/yFNqFUX\n/LTOrSLT6vbTP1mYImxLllYwgV7baf0S8m4Fp7StoephfsV5gSFgjalV9tCg\nO7CDML1ixyd7xY6QTxNAHFO74OfYVr9Qk0S+SbemPQ4XymNrG8+mCA2nfOJB\nf2eg\r\n=vGsv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBy3RomywQ9AhfbvU+bNF+7V04LQZtvJEPCe1yijz66bAiEAkDP5V8gMHThTHpyH5oEsbUKYsyNvQoO4m1cLXq5SHNU="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.4_1617953686742_0.6851435177182874"},"_hasShrinkwrap":false},"2.2.5":{"name":"react-material-ui-carousel","version":"2.2.5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^5.5.1"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.0"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"6a7b63796381af9841a2f9e37dfe1583f625c8d4","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.5","_nodeVersion":"10.19.0","_npmVersion":"7.8.0","dist":{"integrity":"sha512-IhRYMNu2CfiDai/FMBnABr/Go0WSLWvwszK7Iq0hHPBXb0OZgOaC+bxh5RsX0TTtHRSz3T2o0RnhFz5+3Uf+Bg==","shasum":"ade674dad32ecea342dcdb782fec89d95032cbd5","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.5.tgz","fileCount":25,"unpackedSize":1282301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglRAaCRA9TVsSAnZWagAACxoP/R9/l2xuA0aK/KZF73eQ\nU83SLuwTgIxJyCkTsgOp3A4IHQwwrixO0h5pGTctT+ngYLNZ133BBNUSa8gm\nHRaO6IMAgta0yPKDciUBKMByXRMHwxLuNPCiJcZhWc8ZRAIrCs6B3MvrhB0z\ntfmMwBV4Bg8D9zhPzCwquzgpE94ydlCMQJ4VD6xtnO98Er1+pRv7HVtg41FS\nTOyqkOq4rvgYmqxc7309orJGSQBgS0EF3xcf9rC2fkN3SctLh0eoFHLDzCLL\nifARsslyGdlzC1se/dAnZZhB1PPlSSaLco2c0Sg8Hu1dV6lR11SKrDen36zQ\n16YNLVPoGK1l+w4SeQqSYYSQbW2Hg+mweFz5Ney3wi2RDqAzrU7rasiEMd+8\nmR7mqANbX8EEuVthxUXGC4d8u3RqRLeBnbq5WCdH8mfJUm5ahgwnIx0MTDAM\n/mQraraXHn9vR8jbhLcKJ/cEs+Mj4Us3HuvU/MfLrzwSW2kpFRklRRsAkjrH\nKG9EdZlnrc5ieoafVDN7W4VA2j6e//5Tu2Ox0K4Dq70bIL+H7NqC+SVzl6Ns\nDsvKLwgLjvyWDS4XGh3ZnQrIizkBGzJ5agEY4y0O1b7CHBYt7e+VQ+PPgamN\n52mqZaL/Rg9Bkv5yNYnZuAZH1BPtPHiQa6RGMA1y9CYqWAve5bMK7ns1YBVo\n43Gj\r\n=GbyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK8+3FPnfincsZpPYN1hEVdXSPy/KfjY6s/8OsHmZYfgIgQNk2cZTRvhCTv9+NmF5q8ePICHbYS+93fQswwbbtHng="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.5_1620381722147_0.8371254340881924"},"_hasShrinkwrap":false},"2.2.6":{"name":"react-material-ui-carousel","version":"2.2.6","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"850572755e7ce88b4b4912d2c2cbeca8e920bc36","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.6","_nodeVersion":"10.19.0","_npmVersion":"7.8.0","dist":{"integrity":"sha512-ibCAJPGdglZV5Xmf+DTrriEcf+HO16i/SbXDr1BnwJWP+GyNybQHNKI5h7GaCCBFB4sZnR87FVQyckfugxyLvw==","shasum":"9440d0dce52f83fe3e8ae2238b8f9b899c84d7c1","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.6.tgz","fileCount":25,"unpackedSize":1282403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglRnRCRA9TVsSAnZWagAACGcP/3QQGXEHXi/Wr0egO5QQ\nxyuGLc1HnhfvKUvUm4EOAlGKaUvRkXj7UdnBrPgUHhRz9wxpADCmvIe/p6E6\nS9JdxIAKkq2T7flPN0nxfdFpjZxnoVGiUTPTAsEbQjdskrJt4A3DcB60ff/8\ndizkZFJrCw693KlB14qDc3diKQ8mXQAgRzjkMFfOjzHibs9WtfyZn4OH8/qs\n7wjpxDYROEaFJGI7Vy/1GhjiNcH3YfpPNAl6xF0t06EuTnpQ8Ib5EZnS36cH\n7msyXhnIPd+2Lje9eH/x06049uqz3Fo/FRKTA9tN9ajMOUixEaTifCBtI0Cl\nHMAWuS371SubZSI5q2+Q0pXvtYMtCjNzwZEu+kC2y1L0yCnmqEu4/f6w+iar\nZQzc7g28R+s9/yky3ECtR7dBt9qZIh0FefACHyaQs+7t0IWilLS8znwTez/N\nXPJz36FgS5wFekh5dbmU0AxJsgLKNMVPtShJL9ON2q4EpjLLYGNriyjNzQz/\nawjR1hhZN5wt1tQFbvQBLKzqonLAhmnmA8BngGiTSdFX4g3u8id0HZ9oMcaY\nvzjEEklSvws7u3uBNF2JIE2x2PEjUrbewyt5y/AeUhMLKyQIHixDcD2/Lqrh\nLEh0tsie5vpy6imZugoxtvNIaHYb9OF+GOe1aphyzlJkuUtjgHW3m1obhN91\nFeul\r\n=lYQj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIUqtNtcdA0MO1GPaPavRfI12V7sMdMPhEDHLunKhWiAIgEGymFccS9kPwyiIY4+N/2vocFtFM4Q71zFANQ4fo/1g="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.6_1620384208707_0.1687987874889465"},"_hasShrinkwrap":false},"2.2.7":{"name":"react-material-ui-carousel","version":"2.2.7","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"250b9cb3b05493a903c0b7c8cc0e994a7012c2c7","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.2.7","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-aO42C4oupmIxmJwYaTWrlWaXvVVspKcpEu/5efZ9slteATEsqqPtNAeVaE40Vimw2hZeIh2e8vpRwjq7fSsLxw==","shasum":"2f2721310a90870df2a3e6f8543f1fd4e70800b7","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.2.7.tgz","fileCount":10,"unpackedSize":87976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg41keCRA9TVsSAnZWagAA0tkP/3+OoxlW+Kk1SjxfV6mo\nO4e11PmugvvNg1Gb9f7V/QF4AVwJ94YAVcoRMRS1VZJcnPq/1Ck5J269xptd\nC3aYCMeqBGzWfGoxi5QNHX7rYMZG6IDbfh0dHsyyRkXbSM7BSbrInIj1iPtU\n+XIDCSaJ3y4y7guTbIxPtZWkIaBKmp4WCXzKAfzwsZJen6D4xYxDg4KZwI3q\nmVu0Ee2kft2d2Jj3D9kYvKPE9sQhVhUU20I4sX+U3ReeyvkupbIXMnyhkCCz\nRVSS+GB+/7xOEQ8pNkZSvPI7YJyroTfiLAOQo33n6oZWn3x2FSpi18P4NYlV\n81lPZ2hHddd/tdaWhVVz+NrAAR0glXrEBFi3GEKWovhHZw+rHWsqi/RNKCn9\n47JhcGdgutwUWKIMoWeJZbWEttKMz8Ua6fe19wDIJhAUVrcTPHuo3bEZsQ00\n65uEUVXYPnpkeiLuCCXVhVDABFjRuiperxUsWaSE698UNjOLFXavwHF2MPFU\nzG3rpBewurqo+aFAwnUgOVkI/w5m1qAh93Hawc12zvId3K5MwN5n3dq5Pk8s\nkY/vAaN7h7Hb5h1eB137O9DSnA/9D7yyrz/lUVE71uS8ZOrrHe95AWn1lUp+\nCztICR2/mylc6EnTI0wl4nWz+CY/XQz10ex/aXJIltoZg+U/umxeqOXeotD7\n+425\r\n=LKBe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxhv+fkYJYIzH8uqq8399BujACRpqDdjWT31UZRzjcGAiAEyk1TAeR9XagOy3GIitgPh8bmMJXQiPs3AmLct+tCjw=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.2.7_1625512222228_0.6176670162774807"},"_hasShrinkwrap":false},"2.3.0":{"name":"react-material-ui-carousel","version":"2.3.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.18.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"gitHead":"00b1de77ed88bf0c397c243924f237c639fa2f95","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.0","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-cdJtNnPCnesOcDP2AF9ovwrc7XmHBDSrZ5I61sIKZ4hJCm4dxvM1vt2K/WGqAntEUhKr/T7rz0ICz07MnYFw9g==","shasum":"f3b999e8e936f8b9bb390caaa428b6f83ac87bcc","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.0.tgz","fileCount":10,"unpackedSize":95609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGP33CRA9TVsSAnZWagAAnrUQAJSSx2udItOG1H9w9Vl+\n53xlsKujhvvLH0hRE0iA0V65w4Gikht5Tv6oJD6QiyQozgOx5C9DDjInM4Ge\nQaof+6Z7IxTtdmNwjLI5K+mLNT5fS2A1Zs0Hg/DkQ60lz+ayR20+UAiq2dUZ\n0fmlo6uMqvrShnoNgotCWFgxU5YwPOmNp7uXNINrf4UOmuJM/74B345zzFwV\n/0YrMKneMA2dVv7zSOVMjjVVT84JtbTDm4dfMt6kjQvZYAXiCOian3V5+nwS\n75ZNkxsB6WytXwsh36p4xQ7FgbVnpa8bE1IxrTqSmiuAkJjZtwyGz2aY8xp0\n6BsgKWK3GkL5wAkuE7JO4fe3b2bjhZvLK0dRrqg6OKJ7jgd5OTV8ZJJoregE\noC634yhboL7uY/zdSHMeohMGav4K9CUc+ymD71SWi1GjsNqRYV9ZVRUjyszB\nMbW9+Hy+t7CFmwZbN1t1MG3Mo1mdPYptcrfSB1njil5u3RDqqQMrPgT3hDrn\njaNY2STvtS58dnDkLXglauD0UZKmaGKJ4BRxH7yCM44IWoB4vrUdVDW3Bgkz\npuZ8HJ+SWW5LidTFstx5dBKI/0An6E5edxI/rBBGZPml0zwdi825/TzOReiw\nqluEpKQqwZd3+cq+TbiRReTaqQYAQUB5jkZXCcUPhiNK7XR0FsLq6iqX3HZW\nrYvK\r\n=Is0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYjdJRZ7d0dE5LMQ9x6t1IYakXvHQWp/tpZNrVTIhcnwIhAI0snXJWMhpWr/htXpWaUq6n2FZlQsdLV5chRKuE24Kj"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.0_1629027831147_0.743905691838811"},"_hasShrinkwrap":false},"2.3.1":{"name":"react-material-ui-carousel","version":"2.3.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files","prepare":"npm run build"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"gitHead":"4a76174753b3ed5b2a8e1f2352ea33e34492053f","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.1","_nodeVersion":"10.19.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-QV3z+x10x19rSAPSHMmkHtdx/PSiwqo6FeAaY8Y04LtuKM0ZxHsgeMslNdcI8M1G2B48391YqN+ouWFPYqAbTA==","shasum":"73b516f831d45df70bb9219f56fee14a2788e332","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.1.tgz","fileCount":10,"unpackedSize":95618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGQysCRA9TVsSAnZWagAA7NMP/j4tRNLideVsljAViUhv\nGM47wHLh+y4rZAUedxESYifKXA+uHLHmQtfRackufdT1ZZTkSAPs613XqmJv\njprxE7sCAhD/jceB8Mq87irSwfR4tA5Bz+GfRmbnooTJ4Zsjq6mulIgxwvJT\nNGV2k2X7A3WssDWiYM/nnBhSWHBaWY4yXvB2tRa5iWow/cj74BrjFR97cPYB\nl+OBYq2ap80GMyOfcpQ2TiYvUZ3bFNDYPW6/888OCFA5pQE7SfFaoQJxIZVK\nHBl4Ltsiy9OjaeskvO+bvWf4QR+rG3FpQTZkn3dlt3R6wiGHWxELIyrjSXm1\nNZ26dBCg6678Kh/7sPybK7RPbiaxNYMxJNP37QVAs6fx5dkGBA5hsyHwx5TM\n1sRRbOnG+N5EFf+L7eAqu52Xm86O5c9J+Cw6QMCucNmlrn6j6Pgya5+A21OD\nHuCZKHc44PQdg0q/fNVJzpEu/5rudBlGjBAyFTSOUlnaJSfpOFWJeO8aoGtv\n+2iS6HJoJPrMAQxxBUjb06C7aoCcK9duP9C9zBwRSdyjDc8CEeziHXpma/1L\n6h1sWuT77e3tpTMbFpFMx5p/ZPewwiQvoVG6kyrUPw9WxoHLBQyA1AMFkqsC\n2HO4gk1zAv3w/5QLxc5PQ6iFEJuRtitjoeMsoLnQTpbv3nLnWaDosz7YROIG\nZQLc\r\n=df1R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxArkJu3N0vYjsqSRc/9jjUJdXYMKHFWb9HyoQR62JmAiEA7KKMOS1cAHWlpDtogAKhqjDVhBPX3vWwnsx8VkmiPXA="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.1_1629031596067_0.2425696680505942"},"_hasShrinkwrap":false},"2.3.2-mui5":{"name":"react-material-ui-carousel","version":"2.3.2-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"93ecb0f3f9fcd747c8a196d99c6d908bcdba05da","readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) 5\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component.\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\nnpm install @emotion/react\nnpm install @emotion/styled\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.2-mui5","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-FvF9PfEpUoFcQgEjAQkaV34oRv6gXAHYriVx+MYSTCCokMcjNMXiWkSR9pddjWQ5OeR6er60lQxzBfqZDe4VNw==","shasum":"bb068d0af79ef4a22578a046ed9dec40c1ac2361","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.2-mui5.tgz","fileCount":9,"unpackedSize":91444,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmOx7yEksuTZl9Erxm2vCFtsfi23EYUN0tlDaZDOeKmAiBcRW0GUC4XV69iBwZ2SqmFpd2TKg+VX67pbf/dDbGNWw=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.2-mui5_1632298440779_0.8936594767317845"},"_hasShrinkwrap":false},"2.3.3-mui5":{"name":"react-material-ui-carousel","version":"2.3.3-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"93ecb0f3f9fcd747c8a196d99c6d908bcdba05da","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.3-mui5","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-etiCuuvnQagWyI6F1doqIS7akFVmn3vGqQMRgk1vGUPRCqWi3YAMgANaPoHRxgqtlhTovTmW+w0S0YY2iQhlmQ==","shasum":"a5e33bccc7a3b5e1c633d9d71e71b3916c88939f","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.3-mui5.tgz","fileCount":9,"unpackedSize":91413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBz5/3tEnSwGI7H/0EX0XEAwXd8K8K93gSvineczBR38AiAA0rwsW0lc74Z9FgGWMGUUq4v++gqOyw9skJVn2Q9d5g=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.3-mui5_1632298694081_0.09685869733119734"},"_hasShrinkwrap":false},"2.3.4":{"name":"react-material-ui-carousel","version":"2.3.4","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"gitHead":"93ecb0f3f9fcd747c8a196d99c6d908bcdba05da","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.4","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-o2FLyluyKrQY+050xQi0+T7wuvRXheRc4L5G5RGU04otEuVeUBZcBD+vZFJ/rXqNJ+1BRZbN7sDJXIGWiJeu/A==","shasum":"01ebc8b7200d7f99d860113786eb94651eb37b33","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.4.tgz","fileCount":9,"unpackedSize":90684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj/lmCqOv5ri5quN5SYud85cO+Sp+CjVyeWgwgjc5sEgIgNK+4Dgt+eOVFW9NeVBN1gZtZQlWd1YyrRlEOVzlnLj0="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.4_1632300382349_0.30589777389532946"},"_hasShrinkwrap":false},"2.3.5":{"name":"react-material-ui-carousel","version":"2.3.5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"gitHead":"93ecb0f3f9fcd747c8a196d99c6d908bcdba05da","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.5","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-laiysIaA47rX0/lIVjprX5MHrDyjLxgzAsyBnG8OKgO2ad5o3Pg88PAmu6RlMy/L/H6PKFYQ8H5bAqpeZETeYw==","shasum":"c6b4514333564ff4d49d2447f6d67f6c7651e813","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.5.tgz","fileCount":9,"unpackedSize":90630,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7MBOgRlcPL4hCfW+yVhex3a9yV1ssZY7s6spskXnUawIgP67k2b1RpcuEHQWNf5EXLw5tVhhHbwatbtNnNuRjR0g="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.5_1632300705764_0.43207621663938767"},"_hasShrinkwrap":false},"2.3.4-mui5":{"name":"react-material-ui-carousel","version":"2.3.4-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"6e5a10beaa1f629e464db16b34d95a0677f18982","readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) 5\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component.\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\nnpm install @emotion/react\nnpm install @emotion/styled\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.4-mui5","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-o5tmOnJrbcoisJ+2hgE5OQpEra5v1o5unAP9A+M8nnkIdcEOU86HITO9VOSXx0RaM5KhUkJt8JG+CtoRKWAbbw==","shasum":"cbe7ffa1b8dd585da23446d03cacc214e4d48cb4","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.4-mui5.tgz","fileCount":9,"unpackedSize":91413,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnTszi57SSM865R7KGcYQCeSmZ7NhSNl0Gw0ak8N9f4AIgOMgCWhsd0BObsbAnYzRSgao/AlGIMUHqX4Bldb/wYvQ="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.4-mui5_1632301005455_0.12281419150799189"},"_hasShrinkwrap":false},"2.3.5-mui5":{"name":"react-material-ui-carousel","version":"2.3.5-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"6e5a10beaa1f629e464db16b34d95a0677f18982","readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) 5\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component.\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\nnpm install @emotion/react\nnpm install @emotion/styled\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.5-mui5","_nodeVersion":"10.19.0","_npmVersion":"7.19.0","dist":{"integrity":"sha512-5dboQ9SohTtGclHNzv4FnWq2RKupANACETzZu82+8DXUOr8EMqnU2ZogAichiVZH8NwYa3Yn/9aC03dnOkeEiA==","shasum":"dd7d76f254be5e96b92a68f5eb690932bbeb4708","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.5-mui5.tgz","fileCount":9,"unpackedSize":91395,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC0dcX+w5kNxbIFwVHmwc+tO1KalIRnAtsxNITVMWSbaAiB5AGNv8F7nUWwtfsH86SJ6nFBe/YGAVe51pjX5RWARKA=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.5-mui5_1632301219525_0.6679086593956711"},"_hasShrinkwrap":false},"2.3.6-mui5":{"name":"react-material-ui-carousel","version":"2.3.6-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI 5](https://material-ui.com/)\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel@mui5 --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component.\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\nnpm install @emotion/react\nnpm install @emotion/styled\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"6e5a10beaa1f629e464db16b34d95a0677f18982","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.6-mui5","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-ob89sebQQ+VB5SLucIB3eREtGZCAkK1JTpeJ4zCPfwZC3aRlshShTm1dy/DmBF0Ve9ORnYsyhJHpSEULaZ56uA==","shasum":"00a4662a62dbdd2fc001f8e6acb45630655435da","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.6-mui5.tgz","fileCount":10,"unpackedSize":97993,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcebm9HaIWGLfhCu/yb95tkwXC0LY4APmDr9Ej6fAZKAIgYUJQiMRHRlXXoydKlqn5vbdRpnZvSOXNOx7rsEZqmRk="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.6-mui5_1632303393569_0.47208942011997235"},"_hasShrinkwrap":false},"2.3.7-mui5":{"name":"react-material-ui-carousel","version":"2.3.7-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI 5](https://material-ui.com/)\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel@mui5 --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component.\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\nnpm install @emotion/react\nnpm install @emotion/styled\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"6e5a10beaa1f629e464db16b34d95a0677f18982","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.7-mui5","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-XM6+kn6db++riBKUufl7XQI8eE/qj5XWpkDpHUWnioICCdUqx6cvWJmIqjBqcMNB4FgcgJFVmsE3iEKs/4gRIA==","shasum":"4649ad9a210bf891c819da246917ab8d80552339","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7-mui5.tgz","fileCount":10,"unpackedSize":98016,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3QEhyw5AtKs0EYGVqHx4Mptth6WTE6faAFm3ha3nopAiEAr41rEoVIocNx7ernyEU21Y5/ppc3N+pjKRBYzMXzdI0="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.7-mui5_1632304079871_0.500232016976282"},"_hasShrinkwrap":false},"3.0.0-alpha":{"name":"react-material-ui-carousel","version":"3.0.0-alpha","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"src/@types/react-material-ui-carousel/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","test_build":"react-scripts build","build":"npx rimraf dist && npm run build:esm && npm run build:cjs","build:esm":"tsc","build:cjs":"tsc --module commonjs --outDir dist/cjs","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"45350ae47d3772055ea1cabcf139222f5625222c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.0-alpha","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Rkpene/iU5ZAqtlXQowxnIRDpdLZn3aaMPxFVXxoR9zjEC2oNXneONmk71aAImUxUgPhNCBW4IO1j9xCPta0ew==","shasum":"a21f51e3c7508ff7e51692b7761b526e3bdd6f64","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.0-alpha.tgz","fileCount":15,"unpackedSize":87857,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQoTTO0QnbyxkQxmhm6JMwbU5sIkDKnNuLRkASx0H/bAiEAgVyBKJ/hZsHI0UdD+8CknmI0pWOc4CDjnT+eT7tp0og="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.0-alpha_1635460748012_0.5139723780776815"},"_hasShrinkwrap":false},"3.0.1-alpha":{"name":"react-material-ui-carousel","version":"3.0.1-alpha","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","test_build":"react-scripts build","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"45350ae47d3772055ea1cabcf139222f5625222c","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.1-alpha","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-rbjYy822AasiLoqEcQsel/XHjE9vuNYTB8lIytUObgqY6y7qvsYklgwwYhyUIODgK/CFVZnfV/KPgvFQGt+lHw==","shasum":"ebc36081bebcec819c5eed2649928f86860dd74c","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.1-alpha.tgz","fileCount":9,"unpackedSize":62442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvU7MYCc4ecGUsKsbECDUvkl9KfcTwtsDiAf29+3ahsQIgGawrX3ot4jyojDJZxpRZ7/gAWg3ZyBdPizWnz1gcLhM="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.1-alpha_1635461325397_0.5182730927691379"},"_hasShrinkwrap":false},"3.0.2-alpha":{"name":"react-material-ui-carousel","version":"3.0.2-alpha","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"4a4734e76b2afcd59187492821ded7d812eb2fab","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.2-alpha","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-eTWomJg+qhD1D95hZgJVH5Nw5ArJDbpwqSbeYMYsBkYzQGQEd6PFwG84wySTBvpljFUmgrpNqOULaHBJcWclog==","shasum":"44cbe4c195a87f958b4dc8b6ecab86c724920cad","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.2-alpha.tgz","fileCount":9,"unpackedSize":62469,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwITr9bkDI1xMdicFtxY8zInNvJRHVF4IrSfFnC5+enAiEA1ojbbfZ002Tf/9wFYOLWHNw4DqFWvsfYLKP6OKRFV2k="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.2-alpha_1635601827997_0.019842780913613245"},"_hasShrinkwrap":false},"2.3.6":{"name":"react-material-ui-carousel","version":"2.3.6","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\nFor Material UI 5 support please use the links below. \n[Github Branch](https://github.com/Learus/react-material-ui-carousel/tree/material-ui-5)\n[npm package](https://www.npmjs.com/package/react-material-ui-carousel/v/2.3.7-mui5)\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have `material-ui` installed, in order to use this library/component\n\n```shell\nnpm install @material-ui/core\nnpm install @material-ui/icons\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the [Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"b3efedbe0f9c45b76e8a182b0e348090f0a7338b","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.6","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-gVYHia6FhZ0wvP4ZjriNKfpRBrW7ssVuWKxpY9eVi2yg0Zc3Bp2t/a/LN5sPdpx5kR2sFSKNButDnU0X+VVkzQ==","shasum":"30aadd60378d566cc20995c7eac3605179aef367","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.6.tgz","fileCount":9,"unpackedSize":90861,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtKAxC+dB8NYPEAEWpTBC7MQGChWKWXOo8JAdJsIuf6AiBVp6+02MK5Akb2JqjTbBbZtCrF4Wxu324d5hV/pvj+7Q=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.6_1635603060259_0.0375183794398013"},"_hasShrinkwrap":false},"2.3.7":{"name":"react-material-ui-carousel","version":"2.3.7","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\nFor Material UI 5 support please use the links below. \n[Github Branch](https://github.com/Learus/react-material-ui-carousel/tree/material-ui-5)\n[npm package](https://www.npmjs.com/package/react-material-ui-carousel/v/2.3.7-mui5)\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the [Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"b3efedbe0f9c45b76e8a182b0e348090f0a7338b","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.7","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-b5kHIbUQxrgbKbXI03LOkYW4pQuleU629EMP/9X950Nxoq9h7OeaxpE9ggZsINogIufpip/uR7edHpyanRQHJA==","shasum":"2b21823cc8d4dfa601bd431dae67d0d0cc8ecaad","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.7.tgz","fileCount":9,"unpackedSize":91133,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF7shImNliCUBJfArURJSjQYnxeFfIJCPeXhy0HZAcUAIhAO8ZFL5Z8swIO0WVud734muc72KU3iXv4A4DcIeOXzIf"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.7_1635603145094_0.9934819107147954"},"_hasShrinkwrap":false},"2.3.8":{"name":"react-material-ui-carousel","version":"2.3.8","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\nFor Material UI 5 support please use the links below. \n[Github Branch](https://github.com/Learus/react-material-ui-carousel/tree/material-ui-5)\n[npm package](https://www.npmjs.com/package/react-material-ui-carousel/v/2.3.7-mui5)\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the [Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"b3efedbe0f9c45b76e8a182b0e348090f0a7338b","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.8","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-0qAWiKBQI4GCjuCWZANdDuHPW8k8N3qZo3tCn9OxpVNO+M9lq7Xzak63AyPwmRDRw93l97LYhbwQIMohvpaMeg==","shasum":"6d6c088be22301fa91863383f35795d4e917a2a5","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.8.tgz","fileCount":9,"unpackedSize":91145,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGhEUZrkWv9WbtYvDWhnJI0kNH4Wy/vtS4o7ioCfpPIAiAHSGEoZ71Ci5d2KbT2CoKyLfzmGdttIeL2Vfguu1Lc7A=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.8_1635603198486_0.8467657594097122"},"_hasShrinkwrap":false},"2.3.8-mui5":{"name":"react-material-ui-carousel","version":"2.3.8-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI 5](https://material-ui.com/)\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"e89689bcf2f37dbf5b8088c9a80a50ba62d85657","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@2.3.8-mui5","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TzDzYQ4ET8WfQ+dQF6JLJ7TM8rMfI+yrBxkLumGzoJO/uNXiLPyI+tclUofh5PXDgodS15wjaiAqGWOfAjHw/g==","shasum":"c7a7a343e95ae1711339f66408d945ec3d2b9995","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.8-mui5.tgz","fileCount":9,"unpackedSize":92486,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpKux5MFK8EuJ7xOE73g+ht4dW39sHjre/FmcQMK58aAiB7Me0ESzdNq7YUVm5GB4hWkLaO9D9zkMESdoZM9HE7cg=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.8-mui5_1635603311567_0.673813186701167"},"_hasShrinkwrap":false},"3.0.2":{"name":"react-material-ui-carousel","version":"3.0.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"ff73e1490d183fc5185f5958c1527f0e51069452","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-WhMnVSxpP3lJUbdt5JBmQOAja1Vm7P/7jinNq7WkRDlala0inlJrr80Yfu78VqALob2hF0x+OJqqHxqjppzAPQ==","shasum":"58f49ad2f3572ceb45c6c8161f593d46c8884e3c","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.2.tgz","fileCount":9,"unpackedSize":62738,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqi8HlB5b5XsJyDQghCrPLEzTcWKAkaTI/Q47C1lfHMAiAmdAAooJPTP5G3240dTHike2i2S+Zr2qFdDTQ6LOzuTA=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.2_1635604078563_0.2628047079260565"},"_hasShrinkwrap":false},"3.0.3":{"name":"react-material-ui-carousel","version":"3.0.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"73991830f5abcc42e478849a9796f64de3f09883","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-pRLFp4QVtn2tOtV6wIgjCYnW3s3fpCmAiIx3qkcPry7M8vxjvF93UNsKLQHUoXU9si91673DKXUT28KTt5fMPQ==","shasum":"21c5861b3c5387f69603f22b31cdc760f2c9fc2e","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.3.tgz","fileCount":9,"unpackedSize":62738,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjwJnk0pVMw935fWLl84qV0yDLEfLs2uuQu9WZP6/HFAIgH6pDtVtEpQR7WyU2cr0tDwvc99TgPjZ5HV+lMSPV8fc="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.3_1636019547356_0.8092109722739835"},"_hasShrinkwrap":false},"3.0.4":{"name":"react-material-ui-carousel","version":"3.0.4","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"73991830f5abcc42e478849a9796f64de3f09883","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.0.4","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wCtmoNXGBr6aUq69vDtPLDqZa7gkBhUOfx2PMeAOZpdpcci1QZc9oHe6Zp6x9gwHFQstE5Pni36lI4GcAztoCg==","shasum":"8adb4f5264d08ced904abb4347c8031450f2ebf1","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.0.4.tgz","fileCount":9,"unpackedSize":62904,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0Rza9Oc0BjyO+uStsBworExhj3xxF5F8S+sMm508qHwIhAN8Ez6pE5iFooETtjT6XfasOluZJWhIpkxlM13Mh/1wy"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.0.4_1636019597690_0.7864562777161272"},"_hasShrinkwrap":false},"3.1.0":{"name":"react-material-ui-carousel","version":"3.1.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"4d18059d1e18f61b0092e62c5ce8e7ecceef2751","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.1.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-UuaS2IGjpNhQ6S5dfnZjPL3ri4DCGsMxeQokl9/Q4lGwYocRiR480PNUa/Zzc+i6aRB4CtsQX25noy0myxp4kg==","shasum":"36a6b632f9c7e1a916252e6ae463091a31555b8f","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.1.0.tgz","fileCount":9,"unpackedSize":63830,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4C4CRA9TVsSAnZWagAAYcAQAIi+vqnZLcm0adi5xzZ7\nvuDM83lRZN8KjrfPZMa+sLrLBrEODYSbADReOaC9Hw/ASz2hxD0sKUJKqzyn\n/JLi082LazQEUtMrJVq57ksTdWXkFn1LFvdxMAXl+2C+W5OSjw670WRyB4Gp\n4foDTCB36y0vtVHtJQnJnImLV6r6h297BEF+byPel24K98fd0oRbBnnT+b4g\nNQkk9GRcqU+6YYWMEucReER3miDdDTaLxll77yDvx73e/8tucABFn575qOea\n8JfggYPZEabzN8QQp+TqL/jEf/MkO69FW8Fl2NZkG7x+RQGp+tdricX0WhU6\nvFzMnF9JMYXAC0ysY3m6wgKmvtO6LZl6KxNf3uFVkX/Q0SfW/qKISB3jLX4N\nF8Nkv/tcZ44FMmGPx7rZjne3eubpBJrwp5zLLHwkw9NeruczuTSNJYmMqRyV\nnGe9BWaz82Rlx6YE1yrE3yUyE4MLx+91+M9uzhNCj19OYYUiFjd/L3JS7krH\nviLDsRG0L+ouo37x6CBRJuVj3DTqcATHwVuNDw4aIN6Lq0Mej2yGQYNnFFHc\n7nAmvfEyjYv4reUC5RB1EnNsdXKdGoRRmCdw4mTpMdwSnr5rPhnj5NkjEiEg\nxelSDGJGkfSjdTyv72Bxk97D9ec97t8x1KMy36qGB4uf79CHdhme/DCdPZ0v\nQ6vW\r\n=IE21\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd9FvyDo44vqTSR52neEvlNq8TpvhohYgHJkrkhMlaXgIhAOJ7RAuwyWJSjfKHNbrBJHCk1VD0tQhjCIYTyEo1TUW3"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.1.0_1637843127982_0.4637045946907117"},"_hasShrinkwrap":false},"3.1.1":{"name":"react-material-ui-carousel","version":"3.1.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"start":"react-scripts start","build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"gitHead":"eb497d4681e13f2d2d25df22ad5fae271cc31279","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.1.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MmU0eQ9NXMAfPOoK8mR5qPBdMvrtIPXq+FHRiiT+FDXQARKoLO4G1UJP/iMQHWx+9/w9hF8QfZvxZSSs3ab+nA==","shasum":"84c97304a4e9eea6e537736367d0102c30b289cf","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.1.1.tgz","fileCount":9,"unpackedSize":64029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsTXTCRA9TVsSAnZWagAAhfcQAJVLSeIzWWIPOUiXuvDT\nHz3gjqyWgL8nHlDKB+W2AsqqW4Xio4XfyRkIlq1XQOmJc3nDVAujklkKaHeM\nYbSGEVkLlkvMI+aEwZfjgV0NPak89vxvR287muRuXBpRYVeI0nZ9LJEiUCSi\nVe0SJKsSPa+JRX8vHRszkkd46fmt0TTTWKQogKNShrJhWMpY7m4ONvkJuaWi\nZqBYAlGu3RWOKlPXswJwNTushJUVcdmZ8dpIYzKpXPa7gNnh2jnfP863m5jo\ncBeWasJCSEZAQhtw6O3RrVFeuVKYMmFbm1bU1J+X8MHJAD78fWg++vQCySBW\nyDZltxxdx5ikyAFXXV5BMZm2/TORl3gRBuxKLPzt/ZFBDcAPqb2+AcqmbxIR\nm019kgqHZ/DIvZchfutQwqVjyMff4VBxRkuGXSlbY8reBqGI9/5vTPIkJOGJ\nAsLnaJxdzw8cVikcP9uzx/VuJjbfSsPn47opq+YERVqcKWRr/QaKs4LEBo/0\nJZ8lfY7NLvh305oSudUm1Mnxrp/uCLW8LDbI6Caztwl6c9UwpntYiZ6pZYWe\nMdIlBnE7NFx+yUig6AQklpYlqjmD8Czeu8UNaY0+2KyuWKLYst5Jk56DPs7n\nmN1LCE5IfKnHw3JwFW2JzD1+WtWmO9EyQgUCrQDmMREAYQ00kmqIAqP4Vi2X\nuUtm\r\n=4Mnm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpkGJX+Xsfi355ueQ3wJvhJYNWBFIbFFG8abIWIgK5rgIhAO7A54WYzeu7548GAZCIGZTlCu7S6Tl5fAEHWR06GOys"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.1.1_1639003603528_0.6656308255376922"},"_hasShrinkwrap":false},"3.1.2":{"name":"react-material-ui-carousel","version":"3.1.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@3.1.2","dist":{"shasum":"796aa351c2196f61e3de9ede3da595e397b3de60","integrity":"sha512-OgRI3BrB0EuDpBwq5RWojVMbkTwQlvTJahWAjk8diV9VGr86AsiZX+gz7NPDRpUgmgO4fAT/iqrN38QTEzzirA==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.1.2.tgz","fileCount":21,"unpackedSize":96866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//LCRA9TVsSAnZWagAAQcsP+gPqX9Uh/i7fi6+zCpQ3\nU8W+OI0QqVy47jRm3qC18hM1gQoXEZZpbOcGTC2YnaOwbZVmP4MuJEEN5K1O\n0qS/yosKc0XvLGno43WhqA51iH2a20rHROwPteSLXtUBLpLzbA9zYC8HdjEz\n8DauRfG3HgcSJ33pci2yeAZ1wSk8OkryQNdCxje1KRHWxTB1mW1MrKzyO1BE\n3BS2+OnRdkdxt7w6VYhiu+EpAUaSIiXB5+alBVzeUP5XZGqOZRgT4KeiapLT\nf5r8nNdlMFL8IDJbAK5QLikC9gd2QM8M0wbX/ubFcvv89nIrM2F+9X5qOd1J\nCgK8rG2R0AawGk3UL1Hmwj70yXgV/qo+5UIXvvWCeQ0YP2UDP7g2RmB1pViy\n/wcfwO0cs83Jcb57pvjwAZ6CSneqj3xuICrjhzVKqdUxP1D6n/FKCBAE6FgU\njTL2eBwdLfm+Cgl1oolIYTZAkdkTvD9HOurNsBIFC8R8pOTAU67gvkvYZ9vj\nErz62tsluY+Fdf3nZEuJVVOhPrGU4uZLfkGAtG5BokEe0DsyrLtoZC1BwW5S\ngMeJtG8lrc9oAlGYUfJHVBvHfBuiWBp8fL6O/2dEOd3PEtc0Yo9tDkU4m8FU\nEEJKstz7wa3jDXz1ZiunYBqiTIij++QwJ2l+C5yLrFiErdtbkufNpAsqi33p\nEtd7\r\n=3KGh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7oDdHY42O4KNoPS2NmlcRndTEODcIdQ5IMZy8aIbNyQIgLrhtIVPMfRRKWq8pJ7Y+anzGxY56SL3/E8lVB4pEorQ="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.1.2_1644429259463_0.5148760630731495"},"_hasShrinkwrap":false,"deprecated":"Missing peer dep specification fixed in v3.2.0. Downgrade to v3.1.1 or upgrade to v3.2.0"},"3.2.0":{"name":"react-material-ui-carousel","version":"3.2.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@3.2.0","dist":{"shasum":"e802e04f67aefd6bf22b410be08dab5cbede4cb6","integrity":"sha512-LTSCqo1AUhtlP5nVVF7RCpk1woTaBIQnpy2NTEy7dlfJk5b4l703n1Tlssvi2ArhUfBUEpUtpvtgdLGZUkuOyg==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.2.0.tgz","fileCount":21,"unpackedSize":97776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBMjLCRA9TVsSAnZWagAAtYAQAIGCHvK/PGXF8crNOT0G\nvy1sWBHaMZDqrteUBcx8SYq0aTZgb9NKMNWu8dsmJUtzhIgWBKwPUFtF5uZK\np4O6IrLklXM5U/06Xd/argQszaDiimkBSXiaxNvsYtz+Ip73UP2+AKSG7iTm\nTjFnnL6c4TtCY2pEWyuPuTHHO1DM8ngSABplAzIxd7Za+kSzebiRSSFkqL6k\n1bh+Hv2WGWiNBSbZd2SdEiMpU/N8YXawkDz05I9Y43sY42GcBurCl0gjVM1R\nbcJ/hB7XxzuWNZR1wj5FvK0zGRa0+qGl1uB1MG5cI3cY8FlRoTSZOf1FN+EF\nbkJNE0ypLyq2r4QPF4BpLQ9VOScZKfsi0+AgV3v5hHZqyn7I1fmhq6YnMU2X\nareGEXjXDzhmWd7R1BHBv99sCCmm8MgmjgcZzsOh/ftvjR1HUznoCIXwYFbP\ncuvTrxx8/2pnewHaK5nwXOKQ0djEuUfHxWBE89j3wGBhtcCS+js0kVBkrrAc\nXNhQeYnfvFiApNEELSO4re6VLneYwT49GRyBOuwQ55e+tje7P/9UlIsPCU9A\nklfrFLLm1JLDqL5YpkCnrmza1lpK3yLzadjCLfG1VtUn/RducNqNH2NzFcDB\ndENmElsoKmIa6OI5sfsLLuEcMf5xTUMjbKU6dfQmTGsQ1AktCjTmLYAT/D1F\nAB8W\r\n=+o+D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZE8ruzkiBicHGGzkBzOh+qvz/8okprbm0fyS6W107SAiEArrb8pKVPhsDOsAmTVaxeuqWKjtVDgLtUuBJDFsPNqXk="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.2.0_1644480715055_0.661931034096191"},"_hasShrinkwrap":false},"2.3.9-mui5":{"name":"react-material-ui-carousel","version":"2.3.9-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readmeFilename":"README.md","readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI 5](https://material-ui.com/)\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@2.3.9-mui5","dist":{"shasum":"fccc8be829f14e587e833d24c7e59260ab501859","integrity":"sha512-ApGcQDlXpA1xNOMp2NJwFtyCz2ZusZ3eb34/YDi24hxR2bmSIlstmkm/vwW8XVYWFPJPnkcKkd0xzI79EUHeJQ==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.9-mui5.tgz","fileCount":20,"unpackedSize":2170936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBMxiCRA9TVsSAnZWagAAOBAP/1uD2H8YqaXs3B26W10D\nZGuXatwk31WhAQ7w69okvF+LkuqbLq0lm7MDV9k/OyNITUtdlhsiHE0DFqxF\n58WOmKsQYPYRJRogz0vgUkabh8hCtzSVwiPdKH55Ej3jWZt0JsbtzNtn6ZI9\nwguzpvykugIB+VI1t/z+AdU1XdVTYcxIX6cz6kBu5onuDvkcXbu6VM0W6Ihl\nfDtYMVWiHpVzAdn+ecD/zFZsUM3vGqt7esf9qQwkT0XLkJRjmgh8p4muOa9s\ntt+yRd7U/c28nW3kWOrCB6QVDzrAk4CP8Mkdtm6NXFOV6bUU5LG+yW27ixSo\naTNyrOQFq4SLp58ncBIXN9suR8l5XosjLzQZjF+2o/EMouKbEeO4sGI6srKM\nharucMJlI0/4DPy4N254e6pjTO+oiOQju4aci1PjzTI3KKsDsNownKLRXgG7\niID4op0REoEOf85n0v/+70oZMn6n1fCoXZoVO9G+1Z3pd/hRl14xBlTZONBp\ncJL2PGgNnXav9zrj4H/838OBIropNHpyWpKPc5VEuCHM5il1maWA7ELhSdn0\nKbMFajo3npwRKNtURT6futNPCagTdEfUj5VVn+kjjIQTQkg6qJElPXDlVrwu\nVLd0NIjYYOniPB5xEbUrDGXLQ+klmFSITlHSfl9e9z3LR9QZRKqyFOHHH+mD\nB41a\r\n=gMm9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDx3FwVlGv0vMI//b5Vp5SgYpKtBk//hXu7yb/xlA5d6AiEA7Pj5aA3LZ+jQf/kgBoTO9XkCE7btsH4kLAwioeiQKzQ="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.9-mui5_1644481634153_0.8579898250403735"},"_hasShrinkwrap":false},"2.3.10-mui5":{"name":"react-material-ui-carousel","version":"2.3.10-mui5","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/styles":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readmeFilename":"README.md","readme":"# React Material UI Carousel - MUI 5\n\nThis is the version of this package that is created to run on newly released Material UI 5.\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI 5](https://material-ui.com/)\nIt switches between given children using a smooth animation.\nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round.\nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above.\nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | \"\" | Defines custom class name(s), that will be**added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child.*Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in**ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the[Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full**height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\"`IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize**all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the**active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called**after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@2.3.10-mui5","dist":{"shasum":"76380888034b8bf11401639b6a4919b371020878","integrity":"sha512-UfrIRrU2xIN+AMoayQSbcy+XNS4+yRsJ1P1y7JCp+/aCKWcsC2VVVzbRU47xs1ZDGjTm2tSkTU18f98WQtheUw==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.10-mui5.tgz","fileCount":20,"unpackedSize":2170937,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBMzSCRA9TVsSAnZWagAAPQsP/20cOf5edxmUN03zL7nf\nOz2DhlTib8EzPuQgBARty1YAQzi57x+ri86JKaMjdIaGAXaSmYYLUnMXVtyK\ngqNCfoBhlWuyeSNtqJtABkr+lqIpwE5a/puWZejplxW4lVj+tZmkhFiRjA8V\nZPNWgF3QBe7i3lCZFxt5GUuzQwQufQVtbncfC9nZTS2mJEzQGAjy425f79q7\n5f5aBqT/IimFYWKkCwrOqnQNKxbQAT9junHyNcwze2ubPZiaH7/MxmCKRxXQ\nMOdSCOU25f7xTScUEp28xCxTh5VEXJxboWX3uU7vcoL3hbx8rKmUOzVBJK5U\nf6UB2lREt0iKU3beK63lBFd9s7rLW6RAjs3M9s7MWGgilsMK39dlzZ8xxQVj\nEbXrbWPjUlLTU7GJgKTknTcr3vQ3F1YiBlKBdLbDBSGzTDMut8/SbNbrm2g9\nWUwODsT2UxFs8e7aFfbN3ndhhA2gPviQBbeKFDwrk9hMbOYhJpO9zLd9Eec6\n6GaeuJf/SQFNMa70c4kjiCswaS2UUYqCPKm5OHeZSrtuFDmNgMQSbowoTj2g\nX+R+6nLG6BAB10HNhHZeC9q0L2MD+PZsC1d0KvPWF3NV1s7QCzap8dy7xVw8\nIPfhVKM0YxqjqY5Euf951Fz5q8vK1jf35gGhDXO3GgBBZiGPuGMzqb+zMGNF\nM2z/\r\n=yR1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqrUQChV/LVJyjOE9ryXRh4jFoX/inphDVD3GgmHKfxgIhAJQxB7VTK/EXxdumT/VVcJ8mFuxOFdn0KlYTTq+Zxg5S"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.10-mui5_1644481746742_0.7817957711508885"},"_hasShrinkwrap":false},"2.3.10":{"name":"react-material-ui-carousel","version":"2.3.10","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readmeFilename":"README.md","readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\nFor Material UI 5 support please use the links below. \n[Github Branch](https://github.com/Learus/react-material-ui-carousel/tree/material-ui-5)\n[npm package](https://www.npmjs.com/package/react-material-ui-carousel/v/2.3.7-mui5)\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the [Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@2.3.10","dist":{"shasum":"a1189883d9d7fc2db4ee336cd1afebdc73b962a8","integrity":"sha512-6MhrBa0KyHneDYOA0CYwOykV78cKZDKrZkSENj13wIaYCKXI3WVWzrx3hwT1fPpbUMceVCx2vawXIiu5MZvlKA==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.10.tgz","fileCount":20,"unpackedSize":2152340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBM6sCRA9TVsSAnZWagAAezUP/RHW9RhPy4jFTfxMNKVc\nBOs0WW1dLbPTQVVK8UXAlCuo4mMp9t8Fcqup53oQ6JGIhj+WXPzmOy9KHWdG\nWw1KEOuovgBVJLaNsDFcj3lp8GSUGRrIV+jQInbaotJUH/PaNDt+3hFUlR/g\nzeTpU/VH091mwz4Kpj0ma1ttbgzIyvCijfHS8QwEz+UUmJBmrt/S8aUElvKT\n191/gyBaSV0XOHnNIZSQaBwDDN+HMQmAlPQTfjM2q0Qrlj2aEH3PUcjFJlCD\nQS0AYdGFdbJUZeRqaJ+pO6w9GEODVW6O/W9rxvz3DS0ffWAMojxcMZZYLUnd\nvBWpMnsWkXdEh7UTMUZf80norjIwY9fbM93G7vQbjEqtcEp3qk1Mc9Re85Tz\nSpvfe3cObXzRr246EF+KMutLQHsvBzyPSIh81E3hy8noWg0vqyoOtlHYPP/n\n3oLFqJdop5CLTKtwcFb3lj1YX33oc1YJ5XMLpZ86o6/jcJUVfie0qEKuD6A6\nBLAICjIHV/Wr/hCddDpAiDIe+UPs2XH0mvo7c4W3vC8CC5PHF7vYnGQDygsS\nS03r1CsqUq2PmugxvbgX9dhh988Xhmm4wJY51EeHQADaq3rrU4GKnqsu5NsJ\nrgMJeJfX4CfMIQTjH81YBc6u04M/GQtdoDvp0uFnxZix3P1uowudLQh39BCN\n19gy\r\n=AIvg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1CzIBDIj9yh4N5AkZ006vMPTWA3mZSBs/KeLnGi0wLAiEAiLynIoIv3RY/kMLtfslhBYm7Jfr1poh39ovhE2toIHE="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.10_1644482220429_0.3517379586596847"},"_hasShrinkwrap":false,"deprecated":"Uploaded different version's build. Upgrade to v2.3.11."},"2.3.11":{"name":"react-material-ui-carousel","version":"2.3.11","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["react","env","stage-2"]},"dependencies":{"auto-bind":"^2.1.1","react-swipeable":"^6.1.0"},"scripts":{"start":"react-scripts start","build":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"typings":"src/@types/react-material-ui-carousel/index.d.ts","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3"},"peerDependencies":{"@material-ui/core":"^4.11.3","@material-ui/icons":"^4.11.2","react":"^16.13.1 || ^17.0.1","react-dom":"^16.13.1 || ^17.0.1"},"readmeFilename":"README.md","readme":"# React Material UI Carousel\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\nFor Material UI 5 support please use the links below. \n[Github Branch](https://github.com/Learus/react-material-ui-carousel/tree/material-ui-5)\n[npm package](https://www.npmjs.com/package/react-material-ui-carousel/v/2.3.7-mui5)\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@version2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@version2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@material-ui/core'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@material-ui/icons/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@material-ui/core';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n#### Example #2\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@material-ui/icons/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| reverseEdgeAnimationDirection | `boolean` | `true` | Defines whether the animation direction from the last child towards the first will be reverse. Same for the animation direction from the first child towards the last. Will not matter on `\"fade\"` animation. |\n| timeout | `number \\| {appear? number, enter?: number, exit?: number}` | `500` | Defines the duration of the animations. For more information refer to the [Material UI Documentation for Transitions](https://material-ui.com/components/transitions/) |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(index: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(next: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(prev: number, active: number) => void` (internally: `Function`) | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@2.3.11","dist":{"shasum":"0523d4a97caa2fd7d21d803e165b9f3120fe7693","integrity":"sha512-rsD9D2JLDBTfinaPy1+hcb7gunfdX7jmga7xESfRCCtLXzokOrkhmx4qMd8dZmYY42zc/HbYqLqg9E/d187lbw==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-2.3.11.tgz","fileCount":20,"unpackedSize":2151891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBOdLCRA9TVsSAnZWagAAvsMP/A8aHs2rYw1Qy/S/kD21\nuzJL86Vae2BB4JNkS/ykHfvVej65dZsHbfexn0tlZKWaHy1xsL2w5O28vApX\nwGAVr/01eevgBmFhuicFkyFebNRfTypF++MPWNPd8uDcTVon4cQH77O5Hs9y\nfvyyOnsR0crUekRJv7zzwf5Xxw21jc1QRQc2GZU+lV4sS4mSdnwTX6y9qtMc\nT4/T8Y2UPx3JHDULEOHbWkgalRr5cx0DH2McxGp7+4RWOpcg4tGmb60i9cuy\nswQrd7zYzdC5kSHqWS/ioydo65qHIaIQQKR5JTm2IU+dGRmWLBgabHJ4ov0A\n9vnB5wEOOe+84tkAiD/hYLU19L/CSTbzvEjP6xzPuDJjKZ/j6xIFsHlvub05\nVdVGIYzOt0OxqVzYcHzsn2CJ3SDE8KZasvPwPs3GnUhW2hLC3TPAPRzVyLuT\n86OovY9h9e4TVwbCOs+Tz09sdK9UpR0bo9T+uSKvNlRgsKNG3zADDkbCqveT\n2FOmiuZC3l8OmlSnUNpPxHvyzzQNOmIQDwQSITKZWEdY3FxH5BmvdKS3svA3\nrTHTo8vsTxRJzEjggJta3wYTCVKkrQRFzHJCdz1yz94/Cw1tbZmOc5ACUbAQ\nRvGMrIL+5doO5S20dwUkO7IyZl8R/GFb/szLaCTjcVmtiDKZgt0kBpdJ2oYj\njZk4\r\n=gpzQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD36LoY1GZGhJim800vUjsOb2zB5r7p/UXaYop7HOgtjwIhAMUEVKXg+bRNjWBc1lGzjAq6jYoInV0ZmBtyfn+vCjR6"}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_2.3.11_1644488522896_0.30316161998542346"},"_hasShrinkwrap":false},"3.3.0":{"name":"react-material-ui-carousel","version":"3.3.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel [![npm version](https://img.shields.io/npm/v/react-material-ui-carousel.svg?style=flat)](https://www.npmjs.com/package/react-material-ui-carousel)\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n\n#### Example #2\n\nLet's say we would like to have an array to icons like numbers, to order the elements of my carousel numerically. Let's do this!\n \n```jsx\nconst anArrayOfNumbers = [, \n , \n \n ];\n\n\n {...}\n\n```\n\n#### Example #3\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| sx | `SxProps` | `{}` | Defines `sx` props, that will be **inserted** into the Carousel 's root element |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| height | `number \\| string` | `undefined` | Defines the carousel's height in `px`. If this is not set, the carousel's height will be the height of its children |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"113ca4c32965bf8b5bc2b5796843809205e87977","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.3.0","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-+EsJI3lkeKcQjiKWiazLOSTn6pK0iN0kKgLsJi3erWBN8p/p8I2hmuX0t9dTUvTBZespq4TaSHsgWT7fd9pPBQ==","shasum":"4d10f9cb7b33165d40201c92a72ca5cd601afd06","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.3.0.tgz","fileCount":6,"unpackedSize":68921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJfHvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmfQ/+O/QDEnlygrUTrd2AAZopHnjymVv8cgqB2cRrsTqkzs11lcJC\r\nReNsOXOIfWMWR6cm312dRXovIn/2YvC3+XSZm0/at+PAU3vn3K4yKKxJksEt\r\n3mupQOBVQPiAwJZ2jQpKC1JsS828r+Q4sDjCk58WPXlfL6X7MEN50h9MRp/M\r\nczWQQ4g+8FzL98JnaoMNbyfDAMjQh8pLT8xpM9W/83ymiVpWuzMhxY7PjHHO\r\nWYd3fs+BaaYkUzEEhonkGv/qMeJTT2VRpoiVdd3QSScmo5CHHIZqCW5rOTXA\r\nLJ9aEZy491XCp+/tiPljXhZkt7GuqwlRAlzpJ4XLYepsznEjDkyK8du0jWri\r\nFS5HBdZtzenuOJo2oLIdvLURLvv5OAPrCB8w/0A9AhPXmrUvVkLbDDZ/lZao\r\n+/IsGDe5pMDsCNbnw5SWDSkicrZz5vBQuCqRS7bJIhnK7wsZwPv7gLLTQxME\r\n/tFe3DuzFv6ofhjcps6/JhP50+yOwqQLWKPsSHVlpWI9lQtIpkO4B0hnXLsG\r\nx1cC4Lzycmzl3nWFQRDt6BTYkiv8FGp8j3v+Xe8CY+gN9h88H6qpFqtPT+cY\r\n6WqWNNcqUsLRxUhv+3OJpwhGEAGgN2mt54N5tvcky+b+4/elEokNIbLoqHcn\r\nSO8MHy7YPVMbJEzgGw1m9wBS7SQ/SehKm4A=\r\n=qyLA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMV1DI5fvrLnc7jwdYHh4FuPzcMkARbRa/mqDvjrfwgAiBkCQmvUQUdjHlgP14ofd6e3M93g42OGd6HaooDeo/fOA=="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.3.0_1646653935447_0.23260920955566244"},"_hasShrinkwrap":false},"3.3.1":{"name":"react-material-ui-carousel","version":"3.3.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel [![npm version](https://img.shields.io/npm/v/react-material-ui-carousel.svg?style=flat)](https://www.npmjs.com/package/react-material-ui-carousel)\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n\n#### Example #2\n\nLet's say we would like to have an array to icons like numbers, to order the elements of my carousel numerically. Let's do this!\n \n```jsx\nconst anArrayOfNumbers = [, \n , \n \n ];\n\n\n {...}\n\n```\n\n#### Example #3\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| sx | `SxProps` | `{}` | Defines `sx` props, that will be **inserted** into the Carousel 's root element |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| height | `number \\| string` | `undefined` | Defines the carousel's height in `px`. If this is not set, the carousel's height will be the height of its children |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"113ca4c32965bf8b5bc2b5796843809205e87977","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.3.1","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-ezVFK7nR6slRUP1zE6I9Y7cs1gCnpZAVRcO+pl2rUKn2SWLviWo3x4XV+Sp41ktNHvuTiL0tYmSneJZcqcAwxg==","shasum":"2bd9e48d05b21cffece3d74bb1b638a9055ae685","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.3.1.tgz","fileCount":17,"unpackedSize":90154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJfRtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCIw//RFmhDZFzRTqfNdEWpxjRfTkozjOlow5nHDPRRDaotrBxQf63\r\nCn1BYvZX1L82szSlLEabLHWJT5LBt20IGSRTfrWZO1p+qHM9xxBWKntv11sz\r\nCphPjy3fWOTviJwMiXHqeFquX8AjjRm+sykp6JD04IUT1+oSApmFdpouVi8B\r\ns+UHdhVdqkmcWDNRpVPacCSumQruHxdq15QwxYGq8BsI0QG2faaBtEqBDsaH\r\nJ00vv8zwqi8dXACLjhAOHke4LRwtN0Ld8A6eITywOxmhLsmqLxjVz91eqUIA\r\n+33Fs+SUW9NzNTKslb3/cjfFVblpSLVANJSSrdstN6uHIGMENWhdPZ0M3bWf\r\nXpIEHYKPkukLOb6WYR6cgZp2COUP/lAK7w3U/Qjb3jXtFSvgUA31P7HnXm9B\r\neTEN0NObvvOeKItwN88UQW6XPVCttHyclTw3pneKfgelyYJpgDdQ7yvCBQFb\r\neYZO0MYBN80NmxRTJ4AGL/4f+OryXyLwzYsxoa42rCUsH/FA0wcP0rKGhZJA\r\nuIiyjQeZFV7YiwcbA6ZWb1ebWFRoTctPyeaXqV80vuqa74gHikjxqoqTYfQx\r\n1V6LPBf0pyisEYz8wNKhs2FGlAMpeA5GJzAg0C9COLO1IF7MMT4P93kw/ovs\r\nrXLGw8H23baRCeDD9PEmfbBq+bM1L6UnUNQ=\r\n=gPFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDupN28tPIzHQH9DvVfKKfE7ESzDogCRHQnMGbIBePfzQIgBEE21YaB7hjQaQ/wVhLjjVEzC1Ri7d+vUhzU52k4U38="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.3.1_1646654573341_0.8379723500772935"},"_hasShrinkwrap":false},"3.3.2":{"name":"react-material-ui-carousel","version":"3.3.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel [![npm version](https://img.shields.io/npm/v/react-material-ui-carousel.svg?style=flat)](https://www.npmjs.com/package/react-material-ui-carousel)\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n\n#### Example #2\n\nLet's say we would like to have an array to icons like numbers, to order the elements of my carousel numerically. Let's do this!\n \n```jsx\nconst anArrayOfNumbers = [, \n , \n \n ];\n\n\n {...}\n\n```\n\n#### Example #3\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| sx | `SxProps` | `{}` | Defines `sx` props, that will be **inserted** into the Carousel 's root element |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| height | `number \\| string` | `undefined` | Defines the carousel's height in `px`. If this is not set, the carousel's height will be the height of its children. If it is not set, the carousel's height will be the same as the current active child. |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"fa57b4105da6db27cd963964a49954607e848aa7","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.3.2","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-7c3E1KSSTZGU+0yT1OAaz66XCyEhJlfjI1H2aCjuB/PBUO8GXwUPoML5bld1xlVYyyTItPb7DGdUAqdU/9dGSg==","shasum":"445a656a8be3f8ecb0777bb96eb2717252d87da5","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.3.2.tgz","fileCount":17,"unpackedSize":90441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPgxaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmom8Q/8CYUzd0A+Dfs2jWVQYXCRs3VUaDKi4bhM47ZwC5IFz6inOR6G\r\nYU2JubifMz78Ul/eVu6UYWI0itP0QWPU6WAKCCcaLwHqyJqit6dA0A8CaK1I\r\n8931M70tY0hUXE1JfPl9ucUl4VEaEITxe5qfuVaGNJQ6Z150Hx82FBjCKEHh\r\nwiw+EdFZOn4oIpwgU4XVd5ZTIimg3Ib9TX8GFwBTtdeGT5T7V+9K7s9exbeC\r\nhboVmaIEPMwkLIqnX01ZrVaMg1LXjHEQL0Z0EujmQJCEavMTcGQ84Juf11US\r\naAP9vMKWUgKPgvVsAcpJIggXQw4kjN2dR4c/D8mwOXWKr9R+qGW0hkkN1KqO\r\nxHNCxlFhBryzmIX3/2BgsfNFTubssRTlmYh5IXDFU+vlWKKB+cCzmjazghGt\r\n/mRCf2rE4ExgMqxaMvdhjulSDV7fWx3bvC5daEdlS8zUrJ+725jueywrrJal\r\nD3CsvfR+lxblU+RKhVq1kegci77n21cdoY1Y9/w9dLxYCNa/DNqPLs6uY3XR\r\ndLntVtOL+0Bpu4ZDmqWkbPF4Z7oM8NGQeyUOiUcQS4F1edwDv04XdMK8fVUX\r\n6/XXFchGPxZB01aK8Qx7a9mZ4r5CRy92vfOjLA39yHB88C15uzJpxoospTgG\r\nRpU6F2OXF0GH6DKhx00Y7lrYpX9BAEr/V9w=\r\n=Od4/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7ePvVtKtwn3GfhiAKxFFKLv5DFWGQm72THgmhpVCy+QIgTyxow9tzzGjuFmahPBT2x4xHryhWOP0yJq1QbmiTIRw="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.3.2_1648233561872_0.537882810895955"},"_hasShrinkwrap":false},"3.3.3":{"name":"react-material-ui-carousel","version":"3.3.3","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17","react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1","react-dom":"^17.0.1"},"readme":"# React Material UI Carousel [![npm version](https://img.shields.io/npm/v/react-material-ui-carousel.svg?style=flat)](https://www.npmjs.com/package/react-material-ui-carousel)\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n\n#### Example #2\n\nLet's say we would like to have an array to icons like numbers, to order the elements of my carousel numerically. Let's do this!\n \n```jsx\nconst anArrayOfNumbers = [, \n , \n \n ];\n\n\n {...}\n\n```\n\n#### Example #3\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| sx | `SxProps` | `{}` | Defines `sx` props, that will be **inserted** into the Carousel 's root element |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| height | `number \\| string` | `undefined` | Defines the carousel's height in `px`. If this is not set, the carousel's height will be the height of its children. If it is not set, the carousel's height will be the same as the current active child. |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","gitHead":"fa57b4105da6db27cd963964a49954607e848aa7","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.3.3","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-pIojUKfu6s2r5icE5cQYUfEUTa9BT2dc/gw+gdBp32rJVfKlrOglb7Wdrho+hsdKDba2KQxnmYWixGKRbbMVaA==","shasum":"77f83e5262769ee1ae2a377704506620e6aeb326","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.3.3.tgz","fileCount":17,"unpackedSize":90313,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPhQSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprvw//YA4oJ/zhwokrJgdHvFCMB8QQgQURAGMHLrGRif0QO6vgI80H\r\nrJ4lSP+j+uccUvpJHh1tBBCtgBwdzv1RpZFSm90zUe9UrtwJYS7H7Zb/XGqp\r\nN9cq2i/eyFz9MQ8OD6rMOa7uesXzWJBNRO78xLbTXOhOGCuYYE5qJqqC14TG\r\n7Hg4reMFi97Om47aypiGKU40l0GDsyT7DRiPCCElymbCxRkZR7ASzjnNOfLH\r\nOUamfUQFlZrXGKwariftVULPWCh0rPypHcUlj77+OGtwt+Sp3/n5TYranW3a\r\ngfEthAvMa0tzltXpFyew4aj0lEKJO1fmUXvQ8+3vALSLgg9EY3LZbHA5a7uP\r\nuEVmJXVOYw0piWeJBQyRN99hSqqNSc86ayooIU7vDJDYeKd2Fput8S3kfuy6\r\n/1KfYnBtCTd5BXePPNZC/W1AWa1sBzblVX6yWhVnNIeGHsKM8i2xzKi3OQ/F\r\n3tBk8UHu13qgRX1EpnvlEUp/kHJae7XbgUPcackWhXoHKlFTzUu0O3wvZRK6\r\nZM9VQ9U9Er5McqfTCmbw8480hzPzDdAr9KXJrigfuKvGwxy0zSmMLxKluH3u\r\n2UowzDtb88PMbB2Mh5/OL4UT5rkwGdnrwwQCMPIJn1mBvT+AXqZ/xUbdtk2T\r\nLzc/kmjd2EBBY+ZsYHEDtIqGQMyr+d7/kh4=\r\n=9oTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6k4uV6m7XbfqSg+x0A0lsY8cunGD4wGnDM7wXSkelUAiEAp4V4t+yh+MzNAAq02Y4ZkvtRdOu+cNsHpNxMSlUEicA="}]},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.3.3_1648235537942_0.11739677222978795"},"_hasShrinkwrap":false},"3.4.0":{"name":"react-material-ui-carousel","version":"3.4.0","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"git+https://github.com/Learus/react-material-ui-carousel.git"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0"},"gitHead":"ec64db1f4f7700bf6504612080fa3f77b9ebd31a","bugs":{"url":"https://github.com/Learus/react-material-ui-carousel/issues"},"_id":"react-material-ui-carousel@3.4.0","_nodeVersion":"16.13.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-cfiTMx0XCywlcsUpzy634IzW1+8EGVy9jymJ4ms4lODoZfDv2zcuYi32G5d0I9o2iqpW1uVFztkZppx+E4qh5Q==","shasum":"80bb8fa1cd9045723e691156d5f956d670a73bbf","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.0.tgz","fileCount":17,"unpackedSize":90275,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbKLjY5ofV/XJ9YSzhwdKv9Z7sQTRx9u5yZllDmnSmbAIhAIjEvqsLCCGKp+KhumnPrEqrmtVRgSysv2DZ6UO7qmCr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiki44ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq34w/9EX/7fM/5ImGnaBlqoFr1/qu3GNeQzOxGKv4X5iLSN8plOziW\r\njnMyvZCd0VfbMsbjZB72DU2IBYfG1de7c/GtvO6rYg3ZaMBMzEP92pB3zbfw\r\nmle0SMV2jgtbse2q04TMEwGOICilEtWd1+Njmdj1GiPfcjAfKthuGlmwnwYy\r\nXBHmsGZ/X3+GLHJWBRL6q0TPXGsP0xINr3aoWy0WxPOCGkfHynmEHS8TnIjH\r\nOhXXSfemP+7p4awF8mDwMXdsakVJ+Jn3yePkLQ8jHyo6WFUuOEMlAcl2cVwK\r\nfR63TVp5HhMnpEdYy9IlZL1JLkg4x6lvDfHdN/wkb39WPmnq+GJyyeQbpiD6\r\npErmx31z+VlfNLqLLJmkVgujLET8PuxIaeAndk14rCSBYoNRd7kaq9AWMJPQ\r\nICa9qLS7+kSYRhKit9YUBXWqQA59U9Uep6v3VTjNWSiYpLL55wx33Aqq6pSV\r\nnPQ1qLzvhGtA/daEjJDLcXt4VSb8KjUvuGhIqNGoDfsFgdS+mbeYkoC0xDCe\r\naKx4/S7zGrO8glSRhgpCbumDgDO5mUvMvbaT9SO2mLsS6hBgEtccGTlxnOi4\r\nG0I47CAwwCcNbrzSplvUbb2+ZrGO7yhPJjkKcO1UpVYzn6l9RhJpRUSCTgYP\r\nrhK0lH1oAqFAIms9zzxf0UdufQiuA1SZkMo=\r\n=WbQG\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.4.0_1653747256115_0.34717900795648515"},"_hasShrinkwrap":false},"3.4.1":{"name":"react-material-ui-carousel","version":"3.4.1","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0"},"licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@3.4.1","dist":{"shasum":"96d9be40376e0ef76e2d90edfbbb44fd32192a48","integrity":"sha512-6wJLUWdqr6jZ6SB9PhUPgppc3tymqKjHifHnCengLPEmqlo0qmtm3xxGqUMCgxLc+SxrLOFQqw9elkOGjuIuiA==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.1.tgz","fileCount":21,"unpackedSize":100734,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8qc2Q/aEtleNFZ9xUqdrAgRaL0UB4XSSYTA31rHaI+AiEAi3ZIQb35yksg7p2eJLzknIIlnbWHcmi7xGN5sCagRkc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikjvNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoelA//bb2Y8vqIWnI0ndMnhpNKX6KUGj6xL7Q+jBRnJkPBGHijdaip\r\n7BNLgLm2cHxuFv5urQ3GFM4rhv5oP2rPsakYSSk+w7atE0DIaxwiQiLnQ/+s\r\n4sEZtsTki6Z1bycPiRlQNzFNFI2TKH9F7k3VBdT7bGiK7NDoOkW/VeGd8zYj\r\nPKMGmfK+V3qBj5iY3wDg40a4rHPFoehS9//rWvRt7p52KAQqmtjznt77wvJA\r\nD44iWXiqiwM3peR2UO/vu5rZkq5aiZnnaUcU2h0vNjQOazsZOuRmG6DHT3on\r\n3JOK02XsXm9n1iaEOP4LnvbkKaHg6aEWUIV5o2Vq5wFFxlpclEReX484hk3r\r\nPXYHqQ+ngFYdZSeeLWjf4P2RpACl9f87eUmvOB0/BlMhXkfuzUYobBKV7bal\r\nc1oN4p7Z291YPNIasfhnH45yG3ebyzJY8gFYjehQ20nT19bdEPOyg3iP6/dk\r\nui5ZhFWIr4Ls/XxGGum0/1NMcdDLb1wOKo1McFXuCvKbVIDPdwDgblsJt7Uw\r\nywwxUaSD43W0ulCLEIGV5igi/4J/yBZDLAXdeGT+qm+LOOKukJJJjXkv5u0t\r\nOUQhafEJ6e5NMkoRWenmNENrLeDB6r+Ss+DKxoNtRtuYdickus7tRq5DJmOI\r\nelEAubVJfUdz7JSXKQMmaRozENcsDlKjMc4=\r\n=r53Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.4.1_1653750733231_0.9545303982967497"},"_hasShrinkwrap":false},"3.4.2":{"name":"react-material-ui-carousel","version":"3.4.2","license":"MIT","description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"],"main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","babel":{"presets":["react","env","stage-2"]},"scripts":{"build":"npx rimraf dist && npm run build:cjs","build:cjs":"tsc --module commonjs --outDir dist","build_old":"NODE_ENV=production && npx rimraf dist && npx mkdirp dist && npx babel ./src --out-dir dist --copy-files"},"eslintConfig":{"extends":"react-app"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"@emotion/react":"^11.7.1","@emotion/styled":"^11.6.0","@mui/icons-material":"^5.4.1","@mui/material":"^5.4.1","@mui/system":"^5.4.1","framer-motion":"^4.1.17"},"devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","gh-pages":"^2.2.0","react-scripts":"^4.0.3","typescript":"^4.4.4"},"peerDependencies":{"@emotion/react":"^11.4.1","@emotion/styled":"^11.3.0","@mui/icons-material":"^5.0.0","@mui/material":"^5.0.0","@mui/system":"^5.0.0","react":"^17.0.1 || ^18.0.0","react-dom":"^17.0.2 || ^18.0.0"},"licenseText":"MIT License\n\nCopyright (c) 2020 Ioannis Maliaras\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"react-material-ui-carousel@3.4.2","dist":{"shasum":"3db3b4719859960284f262470b304fecad89fa18","integrity":"sha512-jUbC5aBWqbbbUOOdUe3zTVf4kMiZFwKJqwhxzHgBfklaXQbSopis4iWAHvEOLcZtSIJk4JAGxKE0CmxDoxvUuw==","tarball":"https://registry.npmjs.org/react-material-ui-carousel/-/react-material-ui-carousel-3.4.2.tgz","fileCount":21,"unpackedSize":100684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0Rr8cbo5Wf/gKEYC01HpmhVDMwiNpc4/gr4+wYAlaCQIgQKq+0aTpdV1fLjW+nL1OCrxlETr9u8JwMvWWx77VDSY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilS0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4qw/+KtAQub9+YNzLGv7x98KFsF8SvZD7hllIG6okeJ6Th8I/ofDB\r\ntsmDncNc4vUBEme/cy/WChnzKJRVyVczG9zzxAeTCyQvD1h/hrJIw2SpzIS3\r\n6DILPg3KMLtD5me6zHS7c4F5B8tyiNbQOr73CnWeqA8F0Z93rbgI0Crg5bF4\r\nCAu2rkxDeB9fXljaoMzIh/fc1n9S9fc0AEwPlMrk0wMWdloMuh46gd+RsYmj\r\nYgN3cICTj830zcxpFMXXQGQQa3Kk67Nm9/QYe8+iZuCmPDRZGYm9hQM+cBvq\r\neFapZCXiKTE9YMRRxdnoeQczQtEzBBsazKcDAtzgss7NKz3vRUPQJXFFcqtU\r\n7uOlXRxU6p+ub/GW/+Pb+NAuPAoHjU/uZ/xhKSWuBwbqrBvdA//0w35VVr6O\r\nlgp9cC0jMwPPUVh4osoyA8KfeTFfvS+FCD9CWxN3dSU1NplYbfgRpB1QnapI\r\nQbPAaP6crYe7IA3X3zchlgMjjnG6+Udzk8Gp03uMzYSr8mCRbMNqThPN5r5G\r\nrHXunV/BN3opzx3IBXyqVvdKpu/HgY/7jltuMLY6XQF5oDZZ334fcvGOfW4Z\r\nnKe7GDNsRpGjAAfjJ1LmmtqyEX2SIwUUfW6mzi5ymtwrVbU9IRNoQmfgFtfv\r\nhk7keXXjGvR1NoaJsj7KXUJhccYNwUoaWro=\r\n=V2an\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"learus","email":"jmaliaras@gmail.com"},"directories":{},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-carousel_3.4.2_1653943577335_0.6215349249555242"},"_hasShrinkwrap":false}},"time":{"created":"2019-10-15T12:17:24.051Z","0.1.0":"2019-10-15T12:17:24.163Z","modified":"2022-05-30T20:46:17.575Z","0.2.0":"2019-10-15T12:35:16.866Z","0.3.0":"2019-10-15T12:51:04.794Z","0.4.0":"2019-10-15T13:19:47.420Z","0.5.0":"2019-10-15T13:39:56.774Z","0.6.0":"2019-10-15T13:46:28.197Z","0.6.1":"2019-10-15T13:54:41.210Z","0.6.2":"2019-10-15T14:06:10.232Z","0.6.3":"2019-10-15T14:37:36.988Z","0.7.0":"2019-10-16T20:13:24.855Z","0.7.1":"2019-10-16T20:21:35.126Z","0.7.2":"2019-10-16T20:30:04.640Z","0.7.3":"2019-10-16T20:30:28.255Z","1.0.0":"2019-10-16T21:22:46.968Z","1.1.0":"2020-01-07T11:59:02.395Z","1.1.1":"2020-01-07T12:26:11.819Z","1.2.0":"2020-04-16T12:51:58.634Z","1.2.1":"2020-04-16T12:57:29.526Z","1.3.0":"2020-04-23T13:43:58.751Z","1.4.0":"2020-04-25T11:56:07.820Z","1.4.1":"2020-04-25T13:55:43.255Z","1.4.2":"2020-04-25T13:58:49.659Z","1.4.3":"2020-04-25T17:04:06.276Z","1.4.4":"2020-05-13T12:44:05.338Z","1.4.5":"2020-05-15T09:43:27.642Z","1.5.0":"2020-05-25T08:00:13.953Z","1.5.1":"2020-06-02T11:26:02.566Z","1.5.2":"2020-06-13T09:38:38.407Z","1.6.0":"2020-06-14T17:40:03.129Z","1.7.0":"2020-07-21T08:48:38.686Z","1.7.1":"2020-07-21T08:49:03.133Z","1.8.0":"2020-08-02T16:37:32.801Z","1.8.1":"2020-08-02T16:43:16.022Z","1.8.2":"2020-08-13T15:48:15.260Z","1.8.3":"2020-09-01T05:30:56.022Z","1.9.0":"2020-09-20T17:47:12.465Z","1.9.1":"2020-09-20T17:49:32.444Z","1.9.2":"2020-09-21T08:50:27.863Z","2.0.0":"2020-09-22T04:46:09.680Z","2.0.1":"2020-10-06T06:47:36.149Z","2.0.2":"2020-10-21T06:25:10.982Z","2.1.0":"2020-10-28T17:55:33.662Z","2.1.1":"2020-10-28T18:13:20.367Z","2.1.2":"2021-01-11T14:28:19.158Z","2.2.0":"2021-02-25T12:46:01.467Z","2.2.1":"2021-02-26T10:16:55.943Z","2.2.2":"2021-03-26T07:39:44.611Z","2.2.3":"2021-04-09T07:30:09.085Z","2.2.4":"2021-04-09T07:34:46.936Z","2.2.5":"2021-05-07T10:02:02.422Z","2.2.6":"2021-05-07T10:43:29.128Z","2.2.7":"2021-07-05T19:10:22.355Z","2.3.0":"2021-08-15T11:43:51.296Z","2.3.1":"2021-08-15T12:46:36.222Z","2.3.2-mui5":"2021-09-22T08:14:00.986Z","2.3.3-mui5":"2021-09-22T08:18:14.246Z","2.3.4":"2021-09-22T08:46:22.497Z","2.3.5":"2021-09-22T08:51:45.922Z","2.3.4-mui5":"2021-09-22T08:56:45.659Z","2.3.5-mui5":"2021-09-22T09:00:19.673Z","2.3.6-mui5":"2021-09-22T09:36:33.721Z","2.3.7-mui5":"2021-09-22T09:48:00.035Z","3.0.0-alpha":"2021-10-28T22:39:08.197Z","3.0.1-alpha":"2021-10-28T22:48:45.535Z","3.0.2-alpha":"2021-10-30T13:50:28.163Z","2.3.6":"2021-10-30T14:11:00.445Z","2.3.7":"2021-10-30T14:12:25.262Z","2.3.8":"2021-10-30T14:13:18.666Z","2.3.8-mui5":"2021-10-30T14:15:11.709Z","3.0.2":"2021-10-30T14:27:58.785Z","3.0.3":"2021-11-04T09:52:27.549Z","3.0.4":"2021-11-04T09:53:17.848Z","3.1.0":"2021-11-25T12:25:28.181Z","3.1.1":"2021-12-08T22:46:43.762Z","3.1.2":"2022-02-09T17:54:19.602Z","3.2.0":"2022-02-10T08:11:55.184Z","2.3.9-mui5":"2022-02-10T08:27:14.313Z","2.3.10-mui5":"2022-02-10T08:29:06.931Z","2.3.10":"2022-02-10T08:37:00.660Z","2.3.11":"2022-02-10T10:22:03.126Z","3.3.0":"2022-03-07T11:52:15.589Z","3.3.1":"2022-03-07T12:02:53.537Z","3.3.2":"2022-03-25T18:39:22.016Z","3.3.3":"2022-03-25T19:12:18.095Z","3.4.0":"2022-05-28T14:14:16.450Z","3.4.1":"2022-05-28T15:12:13.424Z","3.4.2":"2022-05-30T20:46:17.498Z"},"maintainers":[{"name":"learus","email":"jmaliaras@gmail.com"}],"description":"A Generic, extendible Carousel UI component for React using Material UI","homepage":"https://learus.github.io/react-material-ui-carousel","license":"MIT","readme":"# React Material UI Carousel [![npm version](https://img.shields.io/npm/v/react-material-ui-carousel.svg?style=flat)](https://www.npmjs.com/package/react-material-ui-carousel)\n\n## Description\n\nA Generic, extendible Carousel UI component for React using [Material UI](https://material-ui.com/) \nIt switches between given children using a smooth animation. \nProvides next and previous buttons.\nAlso provides interactible bullet indicators.\n\n## Live Demo\n\nTake a look at this interactible [Live Demo](https://learus.github.io/react-material-ui-carousel)\n\n## Installation\n\n```shell\nnpm install react-material-ui-carousel --save\n```\n\n**Note:**\n\nYou will need to have Material UI installed, in order to use this library/component\n\n```shell\nnpm install @mui/material\nnpm install @mui/icons-material\nnpm install @mui/styles\n```\n\n### Other Versions\n\n```shell\n# Version 2 with MUI 4\nnpm install react-material-ui-carousel@v2 --save\nnpm install @material-ui/core\nnpm install @material-ui/icons\n\n\n# Version 2 with MUI 5 support\nnpm install react-material-ui-carousel@v2mui5 --save\n```\n\n## Usage Example\n\n```jsx\nimport React from 'react';\nimport Carousel from 'react-material-ui-carousel'\nimport { Paper, Button } from '@mui/material'\n\nfunction Example(props)\n{\n var items = [\n {\n name: \"Random Name #1\",\n description: \"Probably the most random thing you have ever seen!\"\n },\n {\n name: \"Random Name #2\",\n description: \"Hello World!\"\n }\n ]\n\n return (\n \n {\n items.map( (item, i) => )\n }\n \n )\n}\n\nfunction Item(props)\n{\n return (\n \n

{props.item.name}

\n

{props.item.description}

\n\n \n \n )\n}\n```\n\n## Next & Prev Usage\n\n```jsx\n console.log(`we left ${active}, and are now at ${next}`); }\n prev={ (prev, active) => console.log(`we left ${active}, and are now at ${prev}`); }\n >\n {...}\n \n\n // OR\n\n {/* Do stuff */} }\n prev={ () => {/* Do other stuff */} }\n >\n {...}\n \n\n // And so on...\n```\n\nNote: `onChange` works in a similar fashion. See [Props](#props) below.\n\n## Customizing Navigation\n\n### Navigation Buttons - Customizing the default solution\n\nThese are the props that are used to directly customize the Carousel's default buttons:\n\n* NextIcon\n* PrevIcon\n* navButtonsProps\n* navButtonsWrapperProps\n* fullHeightHover\n\n#### Example #1\n\nSay we don't like the default icons used for the next and prev buttons\nand want to change them to be an MUI Icon or an image of our own.\n\n```jsx\n\n\nimport RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist\n\n}\n PrevIcon={}\n // OR\n NextIcon={}\n PrevIcon={}\n>\n {...}\n\n```\n\nThe `NextIcon` and `PrevIcon` is of type `ReactNode`, meaning it can be any JSX element or a string. *Note: Extra styling may be needed when using those props*.\n\n#### Example #2\n\nLet's now say we don't like the default graphite background of the buttons, nor do we like the fact that it is round. \nWe also want to place them under the main Carousel, and finally remove the arrows and have \"next\" and \"prev\" accordingly to each button.\n\nA very important note here, is that any styles specified by the user **DO NOT OVERRIDE THE EXISTING STYLES**. They work in tandem with them. That means, that if you want to change, or get rid of a CSS attribute you will have to override it or unset it. The [Default styles](#default-styles) are given at the end of this section, and are part of the code.\n\n```jsx\n\n {...}\n\n```\n\nOf course, extra styling to the button wrappers, or indicators might be needed to achieve exactly what we may be looking for. *Note: You can also use `className` to change the styles externally*.\n\n### Customizing the navigation buttons directly\n\nDo directly customize/change the navigation buttons `NavButton` prop, that allows the user to take complete control of the components rendered as the navigation buttons. It should be used like this:\n\n#### Example\n\n```jsx\nimport {Button} from '@mui/material';\n\n {\n // Other logic\n\n return (\n \n )\n }}\n>\n {...}\n\n```\n\n##### Parameters Explanation\n\n* `onClick`: The function that handles actual navigation. If you do not add this to your component, the buttons will not work.\n* `className`: The className given by the carousel component. This is used to handle Visible/Invisible, hover, and user specified styles (e.g. from navButtonProps). Apply it to the outmost element.\n* `style`: The style given by the carousel component. Used to give any user specified styles (e.g. from navButtonProps).\n* `next`: Boolean value that specifies whether this is the next button.\n* `prev`: Boolean value that specifies whether this is the prev button.\n\nThe prop value must be a function that returns a component. All parameters are optional as far as styling goes (**not functionality**), but it is advised you use them as shown above. \nAs implied, any `className`s or `style`s specified in the navButtonsProps will only be used iff you apply the given `className` and `style` parameters.\n\n### Customizing the Indicators\n\nThere are 4 props that handle indicator customization\n\n* IndicatorIcon\n* activeIndicatorIconButtonProps\n* indicatorIconButtonProps\n* indicatorContainerProps\n\n#### Example\n\nLet's say we would like to change the indicator icon from a circle to a something else, for example a little house\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n}\n // OR\n IndicatorIcon={}\n>\n {...}\n\n```\n\nThe `IndicatorIcon` works the same way as the `NextIcon` and `PrevIcon` prop.\n\n\n#### Example #2\n\nLet's say we would like to have an array to icons like numbers, to order the elements of my carousel numerically. Let's do this!\n \n```jsx\nconst anArrayOfNumbers = [, \n , \n \n ];\n\n\n {...}\n\n```\n\n#### Example #3\n\nNow we want to do more complex customizations. Specifically:\n\n1. More distance between the indicator icons\n2. Change the background color of the active indicator to `red`\n3. Change the color of all indicators to `blue`\n4. Move the indicators to the right side of the carousel\n5. Move the indicators to be further away down from the carousel\n\nWe are going to use all props to style the indicators\n\n```jsx\nimport Home from '@mui/icons-material/Home';\n\n} // Previous Example\n indicatorIconButtonProps={{\n style: {\n padding: '10px', // 1\n color: 'blue' // 3\n }\n }}\n activeIndicatorIconButtonProps={{\n style: {\n backgroundColor: 'red' // 2\n }\n }}\n indicatorContainerProps={{\n style: {\n marginTop: '50px', // 5\n textAlign: 'right' // 4\n }\n\n }}\n>\n {...}\n\n```\n\nAs before, you can use `className` to style the elements externally.\n\n### Default Styles\n\nGiving the default styles in pseudo-code.\n\n#### Navigation Buttons\n\n```js\n{\n buttonWrapper: {\n position: \"absolute\",\n height: \"100px\",\n backgroundColor: \"transparent\",\n top: \"calc(50% - 70px)\",\n '&:hover': {\n '& $button': {\n backgroundColor: \"black\",\n filter: \"brightness(120%)\",\n opacity: \"0.4\"\n }\n }\n },\n fullHeightHoverWrapper: {\n height: \"100%\",\n top: \"0\"\n },\n buttonVisible:{\n opacity: \"1\"\n },\n buttonHidden:{\n opacity: \"0\",\n },\n button: {\n margin: \"0 10px\",\n position: \"relative\",\n backgroundColor: \"#494949\",\n top: \"calc(50% - 20px) !important\",\n color: \"white\",\n fontSize: \"30px\",\n transition: \"200ms\",\n cursor: \"pointer\",\n '&:hover': {\n opacity: \"0.6 !important\"\n },\n },\n // Applies to the \"next\" button wrapper\n next: {\n right: 0\n },\n // Applies to the \"prev\" button wrapper\n prev: {\n left: 0\n }\n}\n```\n\n#### Indicators\n\n```js\n{\n indicators: {\n width: \"100%\",\n marginTop: \"10px\",\n textAlign: \"center\"\n },\n indicator: {\n cursor: \"pointer\",\n transition: \"200ms\",\n padding: 0,\n color: \"#afafaf\",\n '&:hover': {\n color: \"#1f1f1f\"\n },\n '&:active': {\n color: \"#1f1f1f\"\n }\n },\n indicatorIcon: {\n fontSize: \"15px\",\n },\n // Applies to the active indicator\n active: { \n color: \"#494949\"\n }\n}\n```\n\n## Props\n\n| Prop name | Type | Default | Description |\n| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| sx | `SxProps` | `{}` | Defines `sx` props, that will be **inserted** into the Carousel 's root element |\n| className | `string` | \"\" | Defines custom class name(s), that will be **added** to Carousel element |\n| height | `number \\| string` | `undefined` | Defines the carousel's height in `px`. If this is not set, the carousel's height will be the height of its children. If it is not set, the carousel's height will be the same as the current active child. |\n| index | `number` | `0` | Defines which child (assuming there are more than 1 children) will be displayed. Next and Previous Buttons as well as Indicators will work normally after the first render. When this prop is updated the carousel will display the chosen child. *Use this prop to programmatically set the active child*. If (index > children.length) then if (strictIndexing) index = last element. index |\n| strictIndexing | `boolean` | `true` | Defines whether index can be bigger than children length |\n| autoPlay | `boolean` | `true` | Defines if the component will auto scroll between children |\n| stopAutoPlayOnHover | `boolean` | `true` | Defines if auto scrolling will continue while mousing over carousel |\n| interval | `number` | `4000` | Defines the interval in **ms** between active child changes (autoPlay) |\n| animation | `\"fade\" \\| \"slide\"` | `\"fade\"` | Defines the animation style of the Carousel |\n| duration | `number` | `500` | Defines the duration of the animations. |\n| swipe | `boolean` | `true` | Defines if swiping left and right (in touch devices) triggers `next` and `prev` behaviour |\n| indicators | `boolean` | `true` | Defines the existence of bullet indicators |\n| navButtonsAlwaysVisible | `boolean` | `false` | Defines if the next/previous buttons will always be visible or not |\n| navButtonsAlwaysInvisible | `boolean` | `false` | Defines if the next/previous buttons will always be invisible or not |\n| cycleNavigation | `boolean` | `true` | Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. |\n| fullHeightHover | `boolean` | `true` | Defines if the the next/previous button wrappers will cover the full **height** of the Item element and show buttons on full height hover |\n| navButtonsWrapperProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below. |\n| navButtonsProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the actual nav `IconButton`s |\n| NextIcon | `ReactNode` | `` | Defines the element inside the nav \"next\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| PrevIcon | `ReactNode` | `` | Defines the element inside the nav \"prev\" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| NavButton | `({onClick, className, style, prev, next}: {onClick: Function, className: string, style: React.CSSProperties, next: boolean, prev: boolean}) => ReactNode` | `undefined` | Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information. |\n| indicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'` |\n| activeIndicatorIconButtonProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`. |\n| indicatorContainerProps | `{className: string, style: React.CSSProperties} & React.AriaAttributes` | `undefined` | Used to customize the indicators container/wrapper. |\n| IndicatorIcon | `ReactNode` | `` | Defines the element inside the indicator `IconButton`s Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (``, `
`, ...) you like. |\n| onChange | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined |\n| changeOnFirstRender | `boolean` | `false` | Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount` |\n| next | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n| prev | `(now?: number, previous?: number) => any` | `() => {}` | Function that is called **after** internal `prev()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed** |\n\n## License\n\nThe MIT License.\n\n## Author\n\n[Learus](https://learus.github.io)\n","readmeFilename":"README.md","repository":{"type":"git","url":"https://github.com/Learus/react-material-ui-carousel"},"keywords":["react","material","material ui","carousel","gallery"]}