{"_id":"@daniel-fervagner/react-magic-slider-dots","_rev":"12-eb96bafe9d1bfd2f80ef467ce89ecae0","time":{"created":"2024-02-27T15:43:59.827Z","1.0.0":"2024-02-26T20:51:49.096Z","modified":"2024-02-27T15:48:51.291Z","1.0.1":"2024-02-26T20:54:22.406Z","1.0.2":"2024-02-26T21:04:37.023Z","1.0.3":"2024-02-26T21:16:27.231Z","1.0.4":"2024-02-26T21:17:36.535Z","1.0.5":"2024-02-26T21:18:17.487Z","1.0.6":"2024-02-26T21:24:00.853Z","1.0.7":"2024-02-26T21:28:10.162Z","1.1.1":"2024-02-27T15:44:00.416Z","1.1.2":"2024-02-27T15:47:33.249Z","1.1.3":"2024-02-27T15:48:50.864Z"},"name":"@daniel-fervagner/react-magic-slider-dots","dist-tags":{"latest":"1.1.3"},"versions":{"1.1.1":{"name":"@daniel-fervagner/react-magic-slider-dots","version":"1.1.1","description":"React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.","author":{"name":"daniel-fervagner"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/daniel-fervagner/react-magic-slider-dots.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build","release":"np"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","np":"^3.0.4","react":"^16.4.1","react-dom":"^16.4.1","react-scripts":"^1.1.4","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-babel-minify":"^5.0.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"keywords":["react","react-component","react slick","carousel","slick carousel","instagram gallery","carousel navigation","carousel dots","image slider dots"],"_id":"@daniel-fervagner/react-magic-slider-dots@1.1.1","gitHead":"3c9bfccd271bf603fb167567269a4d0ed596e9de","bugs":{"url":"https://github.com/daniel-fervagner/react-magic-slider-dots/issues"},"homepage":"https://github.com/daniel-fervagner/react-magic-slider-dots#readme","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-21YieHbTjJYzSaf3zLS1MtOdSqPHjSqiPSfMRAVZeo60KdREEOac3e43phRislVZvHHRoOb25xFkYIkufdvmGw==","shasum":"4275cdcbacffcb05f4f4f7d291d3fad3fde16cfc","tarball":"https://registry.npmjs.org/@daniel-fervagner/react-magic-slider-dots/-/react-magic-slider-dots-1.1.1.tgz","fileCount":7,"unpackedSize":66293,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC57/pvT5kA8+k6vUzePTzntwT3wiY/CNnD+lHIIGFtuAIhAKMV1RCFDlbh5e3YwYRGVZcuDZueIyZNrMb+Vb8n18bc"}]},"_npmUser":{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"},"directories":{},"maintainers":[{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-magic-slider-dots_1.1.1_1709048640223_0.6869518721185917"},"_hasShrinkwrap":false},"1.1.2":{"name":"@daniel-fervagner/react-magic-slider-dots","version":"1.1.2","description":"React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.","author":{"name":"daniel-fervagner"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/daniel-fervagner/react-magic-slider-dots.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build","release":"np"},"peerDependencies":{"prop-types":"^15.5.4","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","np":"^3.0.4","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^5.0.1","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-babel-minify":"^5.0.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"keywords":["react","react-component","react slick","carousel","slick carousel","instagram gallery","carousel navigation","carousel dots","image slider dots"],"_id":"@daniel-fervagner/react-magic-slider-dots@1.1.2","gitHead":"3c9bfccd271bf603fb167567269a4d0ed596e9de","bugs":{"url":"https://github.com/daniel-fervagner/react-magic-slider-dots/issues"},"homepage":"https://github.com/daniel-fervagner/react-magic-slider-dots#readme","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-PXiwv43WJpvA2+KUXpXuqc6v2KisHV/AY4bxunFkndC9Odnp+rJ6o4uc8fHlzWkStvtm9SYQ7f+eWH02iFIv3A==","shasum":"dd284cf4317f68739b1dc2c633a7532f59d10817","tarball":"https://registry.npmjs.org/@daniel-fervagner/react-magic-slider-dots/-/react-magic-slider-dots-1.1.2.tgz","fileCount":7,"unpackedSize":66271,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4OMMppmEX3TOesfvaNe8oqMJ4pwJVclYh36furMCz8wIhAKEbrCPXVM1qWgmHhjNGv8Xt45naFfiX6Iyg/ZcGGX8U"}]},"_npmUser":{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"},"directories":{},"maintainers":[{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-magic-slider-dots_1.1.2_1709048853071_0.4609443099652031"},"_hasShrinkwrap":false},"1.1.3":{"name":"@daniel-fervagner/react-magic-slider-dots","version":"1.1.3","description":"React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.","author":{"name":"daniel-fervagner"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/daniel-fervagner/react-magic-slider-dots.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build","release":"np"},"peerDependencies":{"prop-types":"^15.5.4","react":"^18.2.0","react-dom":"^18.2.0"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.8.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","np":"^3.0.4","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^5.0.1","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-babel-minify":"^5.0.0","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^1.6.2","rollup-plugin-url":"^1.4.0"},"keywords":["react","react-component","react slick","carousel","slick carousel","instagram gallery","carousel navigation","carousel dots","image slider dots"],"_id":"@daniel-fervagner/react-magic-slider-dots@1.1.3","gitHead":"3c9bfccd271bf603fb167567269a4d0ed596e9de","bugs":{"url":"https://github.com/daniel-fervagner/react-magic-slider-dots/issues"},"homepage":"https://github.com/daniel-fervagner/react-magic-slider-dots#readme","_nodeVersion":"20.11.1","_npmVersion":"10.2.4","dist":{"integrity":"sha512-y36YgQuwgvvz1zbP1ytu5RNPQA+oHsgke3bJcCQPBXIoOIi74NjhUPN4JqSMCuTMfhDmPJJLLdtp9bQb7Dv53A==","shasum":"409cf24037e96405b4e7f1c3a048028765da169b","tarball":"https://registry.npmjs.org/@daniel-fervagner/react-magic-slider-dots/-/react-magic-slider-dots-1.1.3.tgz","fileCount":7,"unpackedSize":66271,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtZlQEzlXpSG4uU0qCXdO1nDK/sKl8CsW1k3DXuZHIFAiEAw25X5F9GMmLoEuXAAOUCGcR0u0U4LTNzcvzP16yRShc="}]},"_npmUser":{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"},"directories":{},"maintainers":[{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-magic-slider-dots_1.1.3_1709048930695_0.3308954834519715"},"_hasShrinkwrap":false}},"maintainers":[{"name":"daniel-fervagner","email":"daniel.fervagner@gmail.com"}],"description":"React Magic Slider Dots Component for React Slick Carousel. Inspired by Instagram.","homepage":"https://github.com/daniel-fervagner/react-magic-slider-dots#readme","keywords":["react","react-component","react slick","carousel","slick carousel","instagram gallery","carousel navigation","carousel dots","image slider dots"],"repository":{"type":"git","url":"git+https://github.com/daniel-fervagner/react-magic-slider-dots.git"},"author":{"name":"daniel-fervagner"},"bugs":{"url":"https://github.com/daniel-fervagner/react-magic-slider-dots/issues"},"license":"MIT","readme":"# react-magic-slider-dots\n\n> React Magic Slider Dots Component for React Slick Carousel\n\n##### _Inspired by Instagram_\n\n[![NPM](https://img.shields.io/npm/v/react-magic-slider-dots.svg)](https://www.npmjs.com/package/react-magic-slider-dots) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n![screenshot](/magic-slider-dots-screenshot.png?raw=true)\n\n## Install\n\n```bash\nnpm install --save react-magic-slider-dots\n```\n\n⚠️ Also install react-slick and slick-carousel for css and font [React Slick Documentation](https://github.com/akiran/react-slick)\n\n```bash\nnpm install slick-carousel\nnpm install react-slick --save\nimport \"slick-carousel/slick/slick.css\";\nimport \"slick-carousel/slick/slick-theme.css\";\n```\n\n## [DEMO](https://patricktran.github.io/react-magic-slider-dots/)\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nimport MagicSliderDots from 'react-magic-slider-dots';\nimport 'react-magic-slider-dots/dist/magic-dots.css';\n\nclass App extends Component {\n render() {\n const settings = {\n dots: true,\n arrows: true,\n infinite: false,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n appendDots: dots => {\n return ;\n }\n };\n\n return (\n \n
\n

1

\n
\n
\n

2

\n
\n
\n

3

\n
\n
\n

4

\n
\n
\n

5

\n
\n
\n

6

\n
\n
\n

7

\n
\n
\n

8

\n
\n \n );\n }\n}\n```\n\n### API\n\nThis a list of props that you can pass down to the component:\n\n| Property | Description | Default value | Type | Required |\n| ----------------------- | ---------------------------------------------------------------- | ----------------------- | ------ | -------- |\n| `dots` | array of HTML li elements representing the slider dot | | array | yes |\n| `numDotsToShow` | number of slider dots to show | | number | yes |\n| `dotWidth` | width, in pixels, of a slider dot including any margins/padding | | number | yes |\n| `dotContainerClassName` | class name of parent div | `magic-dots slick-dots` | string |\n| `activeDotClassName` | class name of active slider dot | `slick-active` | string |\n| `prevNextDotClassName` | class name of left-most (prev) and right-most (next) slider dot. | `small` | string |\n\n## License\n\nMIT © [patricktran](https://github.com/patricktran)\n","readmeFilename":"README.md"}