{"_id":"@tenedev/react-slideshow","_rev":"3-6578f583c91a9b1f06233e87e500d3ce","name":"@tenedev/react-slideshow","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@tenedev/react-slideshow","version":"1.0.0","keywords":["react","slideshow","carousel","image-slider","photo-gallery","react-component","responsive","javascript","typescript","animation","ui-component","frontend"],"author":{"name":"Sriman"},"license":"MIT","_id":"@tenedev/react-slideshow@1.0.0","maintainers":[{"name":"tenedev","email":"tenegamesbusiness@gmail.com"}],"homepage":"https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs","bugs":{"url":"https://github.com/TenEplaysOfficial/react-slideshow/issues"},"dist":{"shasum":"6cf908766536d4448a0ddb2b2014ccd2da7acb6f","tarball":"https://registry.npmjs.org/@tenedev/react-slideshow/-/react-slideshow-1.0.0.tgz","fileCount":6,"integrity":"sha512-KHTSBzsZDaYXjShD7CBbR2b8stH7nzNKtanXpnobZYHkduml4HADXGcp6XE3TUV17W7aQ1F2s4VvKgnHGiYZoQ==","signatures":[{"sig":"MEQCIEpqRb0C2Jnt0S4ILG918OX67pWptzsFKAk8vQuwt8b1AiBG+2MoPSmSPR2L51DFbawmGn3LKG7FLleEbaf+AkQl9Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33241},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","funding":{"url":"https://www.patreon.com/teneplays","type":"individual"},"gitHead":"426dc9c7aa8eb0f6e7b033407fdb519621e21733","scripts":{"test":"vitest run","build":"rollup -c --bundleConfigAsCjs","prepare":"husky install","prettier":"prettier --write .","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"tenedev","email":"tenegamesbusiness@gmail.com"},"repository":{"url":"git+https://github.com/TenEplaysOfficial/react-slideshow.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight, customizable, and responsive slideshow component for React.","directories":{},"_nodeVersion":"18.20.8","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.3","@tailwindcss/postcss":"^4.1.3"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","tslib":"^2.8.1","rollup":"^4.39.0","vitest":"^3.1.1","postcss":"^8.5.3","prettier":"^3.5.3","storybook":"^8.6.12","playwright":"^1.51.1","rehype-raw":"^7.0.0","remark-gfm":"^4.0.1","typescript":"^5.8.3","@types/node":"^22.14.0","lint-staged":"^15.5.0","rehype-slug":"^6.0.0","@types/react":"^19.1.0","react-markdown":"^10.1.0","@storybook/test":"^8.6.12","@vitest/browser":"^3.1.1","@storybook/react":"^8.6.12","@storybook/blocks":"^8.6.12","rollup-plugin-dts":"^6.2.1","@vitest/coverage-v8":"^3.1.1","@rollup/plugin-terser":"^0.4.4","@storybook/react-vite":"^8.6.12","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@chromatic-com/storybook":"^3.2.6","react-syntax-highlighter":"^15.6.1","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","@storybook/addon-essentials":"^8.6.12","@storybook/addon-onboarding":"^8.6.12","prettier-plugin-tailwindcss":"^0.6.11","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4","@storybook/experimental-addon-test":"^8.6.12"},"_npmOperationalInternal":{"tmp":"tmp/react-slideshow_1.0.0_1744299236841_0.6062172802449088","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@tenedev/react-slideshow","version":"1.0.1","keywords":["react","slideshow","carousel","image-slider","photo-gallery","react-component","responsive","javascript","typescript","animation","ui-component","frontend"],"author":{"name":"Sriman"},"license":"MIT","_id":"@tenedev/react-slideshow@1.0.1","maintainers":[{"name":"tenedev","email":"tenegamesbusiness@gmail.com"}],"homepage":"https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs","bugs":{"url":"https://github.com/TenEplaysOfficial/react-slideshow/issues"},"dist":{"shasum":"bced303094eb01855d83e4efe5d0c04a5ef6fdbe","tarball":"https://registry.npmjs.org/@tenedev/react-slideshow/-/react-slideshow-1.0.1.tgz","fileCount":6,"integrity":"sha512-1xuAxjigmT9F1UmFhEN7DZl0ogBfTCLJ2yCDx87HNhAtHjLBhBetwRsWBefWhQrkJuBTcEAwjtj0oP11GWRovA==","signatures":[{"sig":"MEYCIQCI78Q7K6lvirV4I2M0F6sM8wN2G/kseE9L7DcCw7jsXAIhANlP2ATgicIPlU6uoe+FwwABGLUBmoJa+O4dwdT1+qdc","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33361},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","funding":{"url":"https://www.patreon.com/teneplays","type":"individual"},"gitHead":"88e0d536860e3b192045a87084f1c6d273f6d828","scripts":{"test":"vitest run","build":"rollup -c --bundleConfigAsCjs","prepare":"husky install","prettier":"prettier --write .","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"tenedev","email":"tenegamesbusiness@gmail.com"},"repository":{"url":"git+https://github.com/TenEplaysOfficial/react-slideshow.git","type":"git"},"_npmVersion":"10.8.2","description":"A lightweight, customizable, and responsive slideshow component for React.","directories":{},"_nodeVersion":"18.20.8","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.3","@tailwindcss/postcss":"^4.1.3"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^9.1.7","tslib":"^2.8.1","rollup":"^4.39.0","vitest":"^3.1.1","postcss":"^8.5.3","prettier":"^3.5.3","storybook":"^8.6.12","playwright":"^1.51.1","rehype-raw":"^7.0.0","remark-gfm":"^4.0.1","typescript":"^5.8.3","@types/node":"^22.14.0","lint-staged":"^15.5.0","rehype-slug":"^6.0.0","@types/react":"^19.1.0","react-markdown":"^10.1.0","@storybook/test":"^8.6.12","@vitest/browser":"^3.1.1","@storybook/react":"^8.6.12","@storybook/blocks":"^8.6.12","rollup-plugin-dts":"^6.2.1","@vitest/coverage-v8":"^3.1.1","@rollup/plugin-terser":"^0.4.4","@storybook/react-vite":"^8.6.12","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^28.0.3","@chromatic-com/storybook":"^3.2.6","react-syntax-highlighter":"^15.6.1","@rollup/plugin-typescript":"^12.1.2","@rollup/plugin-node-resolve":"^16.0.1","@storybook/addon-essentials":"^8.6.12","@storybook/addon-onboarding":"^8.6.12","prettier-plugin-tailwindcss":"^0.6.11","@types/react-syntax-highlighter":"^15.5.13","rollup-plugin-peer-deps-external":"^2.2.4","@storybook/experimental-addon-test":"^8.6.12"},"_npmOperationalInternal":{"tmp":"tmp/react-slideshow_1.0.1_1744492465474_0.5718779886409304","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@tenedev/react-slideshow","version":"1.0.2","description":"A lightweight, customizable, and responsive slideshow component for React.","keywords":["react","slideshow","carousel","image-slider","photo-gallery","react-component","responsive","javascript","typescript","animation","ui-component","frontend"],"homepage":"https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs","bugs":{"url":"https://github.com/TenEplaysOfficial/react-slideshow/issues"},"repository":{"type":"git","url":"git+https://github.com/TenEplaysOfficial/react-slideshow.git"},"license":"MIT","author":{"name":"Sriman"},"funding":{"type":"individual","url":"https://www.patreon.com/teneplays"},"type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.js"}},"scripts":{"prepare":"husky install","test":"vitest run","build":"rollup -c --bundleConfigAsCjs","prettier":"prettier --write .","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@tailwindcss/postcss":"^4.1.3","react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.3"},"devDependencies":{"@chromatic-com/storybook":"^3.2.6","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2","@storybook/addon-essentials":"^8.6.12","@storybook/addon-onboarding":"^8.6.12","@storybook/blocks":"^8.6.12","@storybook/experimental-addon-test":"^8.6.12","@storybook/react":"^8.6.12","@storybook/react-vite":"^8.6.12","@storybook/test":"^8.6.12","@types/node":"^22.14.0","@types/react":"^19.1.0","@types/react-syntax-highlighter":"^15.5.13","@vitest/browser":"^3.1.1","@vitest/coverage-v8":"^3.1.1","husky":"^9.1.7","lint-staged":"^15.5.0","playwright":"^1.51.1","postcss":"^8.5.3","prettier":"^3.5.3","prettier-plugin-tailwindcss":"^0.6.11","react-markdown":"^10.1.0","react-syntax-highlighter":"^15.6.1","rehype-raw":"^7.0.0","rehype-slug":"^6.0.0","remark-gfm":"^4.0.1","rollup":"^4.39.0","rollup-plugin-dts":"^6.2.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","storybook":"^8.6.12","tslib":"^2.8.1","typescript":"^5.8.3","vitest":"^3.1.1"},"_id":"@tenedev/react-slideshow@1.0.2","gitHead":"e786a9cbf5d6831fd9326008a9ae93ac60aaa12a","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-fgeOes39qsu/YIJ1rvGumNudqWebMNif4zJyOL/tmd+oQbAB778ZRI9gnhEwNuPMq+G65A4sEVDIf8vIDFp+uA==","shasum":"284b4af267f79eacadcfe9b4b57f2aa30939ac7d","tarball":"https://registry.npmjs.org/@tenedev/react-slideshow/-/react-slideshow-1.0.2.tgz","fileCount":6,"unpackedSize":33469,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQClp3tovUu3foCjsGg6Yu6b1br6gvrQ60UbxqNJL5qDUAIgESDXEFTo7DC/gvGrE11TrP1MCDa2Ve/KfLbiCsLw7Ns="}]},"_npmUser":{"name":"tenedev","email":"tenegamesbusiness@gmail.com"},"directories":{},"maintainers":[{"name":"tenedev","email":"tenegamesbusiness@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-slideshow_1.0.2_1744895218594_0.5580183999487274"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-10T15:33:56.774Z","modified":"2025-04-17T13:06:58.949Z","1.0.0":"2025-04-10T15:33:57.032Z","1.0.1":"2025-04-12T21:14:25.746Z","1.0.2":"2025-04-17T13:06:58.775Z"},"bugs":{"url":"https://github.com/TenEplaysOfficial/react-slideshow/issues"},"author":{"name":"Sriman"},"license":"MIT","homepage":"https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs","keywords":["react","slideshow","carousel","image-slider","photo-gallery","react-component","responsive","javascript","typescript","animation","ui-component","frontend"],"repository":{"type":"git","url":"git+https://github.com/TenEplaysOfficial/react-slideshow.git"},"description":"A lightweight, customizable, and responsive slideshow component for React.","maintainers":[{"name":"tenedev","email":"tenegamesbusiness@gmail.com"}],"readme":"# [React Slideshow](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs)\n\n
\n\n[![npm](https://img.shields.io/npm/v/@tenedev/react-slideshow?color=blue&label=NPM&logo=npm&style=flat-square)](https://www.npmjs.com/package/@tenedev/react-slideshow)\n[![downloads](https://img.shields.io/npm/dt/@tenedev/react-slideshow?color=blue&label=Downloads&logo=archive&style=flat-square)](https://www.npmjs.com/package/@tenedev/react-slideshow)\n![size](https://img.shields.io/bundlephobia/minzip/@tenedev/react-slideshow?style=flat-square&label=Size&logo=webpack&color=blue)\n![maintenance](https://img.shields.io/maintenance/active/2025?style=flat-square&label=Maintained&logo=calendar&color=blue)\n![Node.js](https://img.shields.io/badge/Node.js-%3E%3D16-blue?logo=node.js&style=flat-square)\n[![Storybook](https://img.shields.io/badge/Storybook-Live%20Docs-blue?logo=storybook&style=flat-square)](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/introduction--docs)\n[![contribute](https://img.shields.io/badge/Contribute-Open%20PRs-blue?style=flat-square&logo=git)](https://github.com/TenEplaysOfficial/react-slideshow/pulls)\n[![stars](https://img.shields.io/github/stars/TenEplaysOfficial/react-slideshow?style=flat-square&label=Stars&logo=github)](https://github.com/TenEplaysOfficial/react-slideshow)\n![forks](https://img.shields.io/github/forks/TenEplaysOfficial/react-slideshow?style=flat-square&label=Forks&logo=github)\n[![issues](https://img.shields.io/github/issues/TenEplaysOfficial/react-slideshow?style=flat-square&label=Issues&logo=github&color=blue)](https://github.com/TenEplaysOfficial/react-slideshow/issues)\n[![last commit](https://img.shields.io/github/last-commit/TenEplaysOfficial/react-slideshow?style=flat-square&label=Last%20Commit&logo=github&color=blue)](https://github.com/TenEplaysOfficial/react-slideshow)\n![workflow](https://img.shields.io/github/actions/workflow/status/TenEplaysOfficial/react-slideshow/publish.yml?style=flat-square&label=Build&logo=githubactions&color=blue)\n![license](https://img.shields.io/github/license/TenEplaysOfficial/react-slideshow?style=flat-square&label=License&logo=open-source-initiative&color=blue)\n\n
\n\nA lightweight, customizable, and responsive slideshow component for React. Supports auto image switching, infinite looping, custom navigation buttons, and flexible styling positions. Perfect for modern React applications that need a smooth and clean slideshow experience.\n\n## πŸ—‚οΈ Table of Contents\n\n- [πŸš€ Installation](#-installation)\n- [πŸ“¦ Usage](#-usage)\n- [βš™οΈ Props](#️-props)\n- [🎨 Customization](#-customization)\n - [Custom Buttons](#custom-buttons)\n- [πŸ“˜ Example](#-example)\n- [πŸ› οΈ Contributing](#️-contributing)\n- [πŸ“œ License](#-license)\n\n## πŸš€ Installation\n\n```bash\nnpm install @tenedev/react-slideshow\n# or\nyarn add @tenedev/react-slideshow\n```\n\n## πŸ“¦ Usage\n\n```tsx\nimport React from 'react';\nimport Slide from '@tenedev/react-slideshow';\n// or\nimport { Slide } from '@tenedev/react-slideshow';\n\nconst images = [\n 'https://source.unsplash.com/random/800x400?sig=1',\n 'https://source.unsplash.com/random/800x400?sig=2',\n 'https://source.unsplash.com/random/800x400?sig=3',\n];\n\nexport default function App() {\n return (\n console.log('Slide:', i)}\n />\n );\n}\n```\n\n## βš™οΈ Props\n\n| Prop | Type | Default | Description |\n| -------------------- | ------------------------------------------------------------------- | ----------------------- | --------------------------------------------- |\n| `images` | `Array` | **Required** | Array of image URLs or objects with alt text. |\n| `duration` | `number` | `3000` | Time (ms) between auto transitions. |\n| `autoSwitch` | `boolean` | `true` | Enable auto switching between slides. |\n| `infiniteLoop` | `boolean` | `true` | Loop slideshow infinitely. |\n| `animation` | `\"slide\"` \\| `\"fade\"` | `\"slide\"` | Transition type. |\n| `onSlideChange` | `(index: number) => void` | `undefined` | Callback on slide change. |\n| `buttonPosition` | `\"overlay\"` \\| `\"bottom\"` | `\"overlay\"` | Position of navigation buttons. |\n| `customButton` | `{ left?: string \\| ReactElement; right?: string \\| ReactElement }` | Arrows from `getIcon()` | Custom navigation buttons. |\n| `hideButton` | `boolean` | `false` | Hide navigation buttons. |\n| `showIndicators` | `boolean` | `false` | Show small indicators for each slide. |\n| `defaultImageIndex` | `number` | `0` | Starting slide index. |\n| `pauseOnHover` | `boolean` | `false` | Pause auto-switching on hover. |\n| `transitionDuration` | `number` | `700` | Duration of transition animation in ms. |\n\n## 🎨 Customization\n\n### Custom Buttons\n\n```tsx\n\n```\n\n## πŸ“˜ Example\n\nHere’s a complete working example in React for more visit [Live](https://teneplaysofficial.github.io/react-slideshow/?path=/docs/image-slideshow-demo--docs):\n\n```tsx\nimport React from 'react';\nimport Slide from '@tenedev/react-slideshow';\n//or\nimport { Slide } from '@tenedev/react-slideshow';\n\nconst App = () => {\n const slides = [\n '/images/slide1.jpg',\n '/images/slide2.jpg',\n '/images/slide3.jpg',\n ];\n\n return (\n
\n \n
\n );\n};\n\nexport default App;\n```\n\n## πŸ› οΈ Contributing\n\nWe welcome contributions from the community!\n\nIf you have ideas, suggestions, or bug reports, feel free to [open an issue](https://github.com/TenEplaysOfficial/react-slideshow/issues) or [submit a pull request](https://github.com/TenEplaysOfficial/react-slideshow/pulls) on GitHub.\n\nLet's make `@tenedev/react-slideshow` better together!\n\n## πŸ“œ License\n\nThis project is licensed under the [MIT License](LICENSE). \nCopyright Β© [TenEplaysOfficial](https://github.com/TenEplaysOfficial)\n","readmeFilename":"README.md"}