{"_id":"@cjboco/cj-image-flip-previewer","_rev":"6-407d9e35f4aaee9a928d8e5d11df2b7b","name":"@cjboco/cj-image-flip-previewer","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@cjboco/cj-image-flip-previewer","version":"1.0.0","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","_id":"@cjboco/cj-image-flip-previewer@1.0.0","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"dist":{"shasum":"5f30d7058706400b40396c1558f64a9564692a57","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.0.0.tgz","fileCount":17,"integrity":"sha512-SR4n5p8mHpyrIRHo5za/s89ZV06Ht7Pqs8F7o5EWzQydcCpfb0tacIJW8WGMVUtJsxXdrZT/1Si4JTcTBWXWmg==","signatures":[{"sig":"MEYCIQDULnf2kTjUPywFZBAd6LdjOLxB1jBIUp/EGLycqWbnEwIhAOdr+HZhFfmfzjTNSNQuR9lLQMtz6k0iz/ZnO4jG1T6Y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70266},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"d6776eef606b7652511d2a635b04a56a5f64aaa1","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"_npmVersion":"11.6.2","description":"React components for interactive image previews — flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^25.9.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cj-image-flip-previewer_1.0.0_1779843909752_0.9888302878647961","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@cjboco/cj-image-flip-previewer","version":"1.0.1","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","_id":"@cjboco/cj-image-flip-previewer@1.0.1","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"homepage":"https://cjboco.github.io/cj-image-flip-previewer/","bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"dist":{"shasum":"804c1708c6e316e57d4da52b5dcf1b85e6996322","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.0.1.tgz","fileCount":17,"integrity":"sha512-JXTdJjMGiXpK49Eqm/wiQmKuKlu/qvfqV4raDd1T/oYjyitRpgW8BGEsGRqza8JWpTA+ndIFXictcl4JCLDnrA==","signatures":[{"sig":"MEQCIE81/WTwaSYyLq+tH+rh6IYxPH9TFdK8QqOJ36q2xv1fAiBdmJppsQNBLzBjYWuxvInb6xyoGv5utmEOou2+EkmGXw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":70601},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"a82cdafd515ed857cf969b2248b62619fba101d4","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"repository":{"url":"git+https://github.com/cjboco/cj-image-flip-previewer.git","type":"git"},"_npmVersion":"11.6.2","description":"React components for interactive image previews — flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^25.9.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cj-image-flip-previewer_1.0.1_1779844498995_0.3629867537668636","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@cjboco/cj-image-flip-previewer","version":"1.1.0","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","_id":"@cjboco/cj-image-flip-previewer@1.1.0","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"homepage":"https://cjboco.github.io/cj-image-flip-previewer/","bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"dist":{"shasum":"20eef951450607a444d4863de3e89ec5b95a5bbc","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.1.0.tgz","fileCount":17,"integrity":"sha512-jPjTgynqsSZ1vHXZw2h0MzsDLfFvl4k7BTaNzoBXSZem/TH3/dvQRAGn+ZP4qXKlHGBMic7oveCpr14qdlpUpg==","signatures":[{"sig":"MEQCIGE8ad0cdAO0i5tZN/12UO7T0+A8J6W9SjAy5M2uCRMDAiAyoluwDZeeyJT43d2ETWK0xIsB0a09F5YMqZdf5oAY/w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87364},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"7b32a501c146a29647a5f75725b4dbf25b0c0470","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"repository":{"url":"git+https://github.com/cjboco/cj-image-flip-previewer.git","type":"git"},"_npmVersion":"11.6.2","description":"React components for interactive image previews — flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^25.9.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cj-image-flip-previewer_1.1.0_1779846276049_0.5072759384723342","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@cjboco/cj-image-flip-previewer","version":"1.1.1","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","_id":"@cjboco/cj-image-flip-previewer@1.1.1","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"homepage":"https://cjboco.github.io/cj-image-flip-previewer/","bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"dist":{"shasum":"fe90d2e315576b03c409039b979752e5bf6cf161","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.1.1.tgz","fileCount":17,"integrity":"sha512-Q6yvymbCI3fvcgtRgj79mKrJC4v9SaWnuv6GUP/xIewMnX/cwLt/NqWpin3PdN+DcS88bMeebgbfn11yBqB1uw==","signatures":[{"sig":"MEUCICh/Wq3/xcVJJ0GbJa+eQ0sSQovkKRvsHSx320MbzBGOAiEA6x9rxNeWPcVAFQSf0VVYUXC5FZb93jEBCf6heE086/Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87364},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"27bc3f123b541213fb3c2e2f51040c26d2e056cc","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"repository":{"url":"git+https://github.com/cjboco/cj-image-flip-previewer.git","type":"git"},"_npmVersion":"11.6.2","description":"React components for interactive image previews — flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","directories":{},"_nodeVersion":"25.1.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.0","@types/node":"^25.9.1","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cj-image-flip-previewer_1.1.1_1779847403003_0.5361359647674311","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"@cjboco/cj-image-flip-previewer","version":"1.1.3","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","_id":"@cjboco/cj-image-flip-previewer@1.1.3","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"homepage":"https://cjboco.github.io/cj-image-flip-previewer/","bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"dist":{"shasum":"11453129440cfc08c9a5a7538210c393aa2e8673","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.1.3.tgz","fileCount":17,"integrity":"sha512-sLvh2GcqyiF/IAuniKnxwPqDA4pL9Jd6ZS06yrZ0xtWDEl233UgO9K44KEMeMDKkVO0zFey2Yl8LPKcdzzjxzg==","signatures":[{"sig":"MEQCID6wi2TcSpSC9hrzNcEqJNWS2rPJ0eLKRKCfstWxfpItAiAiouKoW/3sq1uHtMtYi6ST4apCyW9vkEYqTa5rwOnvoA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cjboco%2fcj-image-flip-previewer@1.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":87135},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"gitHead":"b9c4a915adf3362928beaca8d2ac98db9bed02bc","scripts":{"dev":"tsup --watch","build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"repository":{"url":"git+https://github.com/cjboco/cj-image-flip-previewer.git","type":"git"},"_npmVersion":"10.9.8","description":"React components for interactive image previews - flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","directories":{},"_nodeVersion":"22.22.3","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","react":"^19.2.7","react-dom":"^19.2.7","typescript":"^5.9.3","@types/node":"^25.9.4","@types/react":"^19.2.17","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/cj-image-flip-previewer_1.1.3_1782252917057_0.3599120198956869","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@cjboco/cj-image-flip-previewer","version":"1.2.0","description":"React components for interactive image previews - flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","author":{"name":"Doug Jones"},"license":"BSD-3-Clause","repository":{"type":"git","url":"git+https://github.com/cjboco/cj-image-flip-previewer.git"},"homepage":"https://cjboco.github.io/cj-image-flip-previewer/","bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./server":{"import":{"types":"./dist/server.d.ts","default":"./dist/server.js"},"require":{"types":"./dist/server.d.cts","default":"./dist/server.cjs"}},"./styles.css":"./dist/styles.css"},"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0"},"devDependencies":{"@types/node":"^25.9.4","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","react":"^19.2.7","react-dom":"^19.2.7","tsup":"^8.5.1","typescript":"^5.9.3"},"_id":"@cjboco/cj-image-flip-previewer@1.2.0","gitHead":"d66da236abf47b44fe580d1c6239c6323df58274","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-7kUOOoaaq1jTOlpOucN8NPg/BrL8FMoACf7HrwnvlW5yAByCcKn/+yKf3B+X1CwWmVkKjTZ1A/bvpqveEllH6g==","shasum":"7d557840077d3645b917bf9adcc44ed70a92d1a0","tarball":"https://registry.npmjs.org/@cjboco/cj-image-flip-previewer/-/cj-image-flip-previewer-1.2.0.tgz","fileCount":17,"unpackedSize":87135,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cjboco%2fcj-image-flip-previewer@1.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCvMRONI0Ys5STQT9mFcWTgOYZ3W0QaJsMXGeFS4D9cEAIgD/NjjS7CqwEHYy8PQdP+zfKMaM/AWCBepcppHrClkQg="}]},"_npmUser":{"name":"cjboco","email":"websafe@cjboco.com"},"directories":{},"maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cj-image-flip-previewer_1.2.0_1782869277705_0.47243648013966744"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-27T01:05:09.553Z","modified":"2026-07-01T01:27:58.159Z","1.0.0":"2026-05-27T01:05:09.913Z","1.0.1":"2026-05-27T01:14:59.134Z","1.1.0":"2026-05-27T01:44:36.189Z","1.1.1":"2026-05-27T02:03:23.149Z","1.1.3":"2026-06-23T22:15:17.251Z","1.2.0":"2026-07-01T01:27:57.865Z"},"bugs":{"url":"https://github.com/cjboco/cj-image-flip-previewer/issues"},"author":{"name":"Doug Jones"},"license":"BSD-3-Clause","homepage":"https://cjboco.github.io/cj-image-flip-previewer/","keywords":["react","image","flipbox","video-previewer","360","product-view","interactive","mouseover","hover","thumbnail","animation"],"repository":{"type":"git","url":"git+https://github.com/cjboco/cj-image-flip-previewer.git"},"description":"React components for interactive image previews - flip through images by mouse position (FlipPreviewer) or animate frames on hover like a video previewer (VideoPreviewer).","maintainers":[{"name":"cjboco","email":"websafe@cjboco.com"}],"readme":"# cj-image-flip-previewer\n\n[![npm version](https://img.shields.io/npm/v/%40cjboco%2Fcj-image-flip-previewer)](https://www.npmjs.com/package/@cjboco/cj-image-flip-previewer)\n[![license](https://img.shields.io/npm/l/%40cjboco%2Fcj-image-flip-previewer)](https://github.com/cjboco/cj-image-flip-previewer/blob/master/LICENSE)\n[![deploy](https://img.shields.io/github/actions/workflow/status/cjboco/cj-image-flip-previewer/deploy-demo.yml?label=demo)](https://cjboco.github.io/cj-image-flip-previewer/)\n\nA React component for interactive image previews. Zero dependencies beyond React 19+.\n\n**[Live Demo](https://cjboco.github.io/cj-image-flip-previewer/)**\n\nOne component, two modes:\n- **`mode=\"position\"`** - Image changes based on horizontal mouse/touch position (360-degree product views)\n- **`mode=\"hover\"`** - Images auto-cycle on a timer when hovered (video thumbnail previews)\n\n## Install\n\n```bash\nnpm install @cjboco/cj-image-flip-previewer\n```\n\n## Setup\n\nImport the stylesheet once in your app (e.g., in your root layout or entry file):\n\n```tsx\nimport \"@cjboco/cj-image-flip-previewer/styles.css\";\n```\n\n---\n\n## Position Mode (default)\n\nImage changes based on where the mouse is horizontally within the container. Move left-to-right to cycle through all images.\n\n```tsx\nimport { FlipPreviewer } from \"@cjboco/cj-image-flip-previewer\";\n\n<FlipPreviewer\n  width={320}\n  height={240}\n  images={[\n    { src: \"/images/angle-1.jpg\", alt: \"Front\" },\n    { src: \"/images/angle-2.jpg\", alt: \"Side\" },\n    { src: \"/images/angle-3.jpg\", alt: \"Back\" },\n    { src: \"/images/angle-4.jpg\", alt: \"Other side\" },\n  ]}\n/>\n```\n\n### With Links\n\nEach image can have its own link:\n\n```tsx\n<FlipPreviewer\n  width={320}\n  height={240}\n  images={[\n    { src: \"/img1.jpg\", href: \"/products/1\", title: \"View product\" },\n    { src: \"/img2.jpg\", href: \"/products/2\", target: \"_blank\", rel: \"noopener noreferrer\" },\n  ]}\n/>\n```\n\n---\n\n## Hover Mode\n\nImages auto-cycle on a timer when the mouse enters the container, like Netflix/YouTube thumbnail previews.\n\n```tsx\n<FlipPreviewer\n  mode=\"hover\"\n  width={160}\n  height={110}\n  images={[\n    { src: \"/images/frame-01.jpg\" },\n    { src: \"/images/frame-02.jpg\" },\n    { src: \"/images/frame-03.jpg\" },\n    { src: \"/images/frame-04.jpg\" },\n  ]}\n/>\n```\n\n### Auto-Play\n\nStart cycling immediately without waiting for hover:\n\n```tsx\n<FlipPreviewer\n  mode=\"hover\"\n  autoPlay\n  delay={300}\n  showProgress={false}\n  width={320}\n  height={240}\n  images={[\n    { src: \"/frame1.jpg\", href: \"/watch/123\" },\n    { src: \"/frame2.jpg\", href: \"/watch/123\" },\n    { src: \"/frame3.jpg\", href: \"/watch/123\" },\n  ]}\n/>\n```\n\n### Imperative Control\n\nUse a ref to programmatically start and pause the animation:\n\n```tsx\nimport { useRef } from \"react\";\nimport { FlipPreviewer, type FlipPreviewerRef } from \"@cjboco/cj-image-flip-previewer\";\n\nfunction ControlledPreviewer() {\n  const ref = useRef<FlipPreviewerRef>(null);\n\n  return (\n    <>\n      <FlipPreviewer\n        ref={ref}\n        mode=\"hover\"\n        width={320}\n        height={240}\n        images={[\n          { src: \"/frame1.jpg\" },\n          { src: \"/frame2.jpg\" },\n          { src: \"/frame3.jpg\" },\n        ]}\n      />\n      <button onClick={() => ref.current?.start()}>Play</button>\n      <button onClick={() => ref.current?.pause()}>Pause</button>\n    </>\n  );\n}\n```\n\n---\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `mode` | `\"position\" \\| \"hover\"` | `\"position\"` | How images cycle |\n| `images` | `FlipPreviewerImage[]` | *required* | Array of images |\n| `width` | `number \\| string` | `\"100%\"` | Container width |\n| `height` | `number \\| string` | `\"100%\"` | Container height |\n| `delay` | `number` | - | Ms between frames (hover mode only). Omit for max speed (requestAnimationFrame). |\n| `autoPlay` | `boolean` | `false` | Auto-start animation (hover mode only) |\n| `showProgress` | `boolean` | `true` | Show preload progress bar (hover mode only) |\n| `showCursor` | `boolean` | `true` | Show horizontal resize cursor (position mode only) |\n| `debug` | `boolean` | `false` | Show debug overlay (position mode only) |\n| `className` | `string` | - | Additional CSS class(es) |\n| `style` | `CSSProperties` | - | Additional inline styles |\n| `onIndexChange` | `(index: number) => void` | - | Called when the active image changes |\n| `onImagesLoaded` | `() => void` | - | Called when all images finish preloading (hover mode only) |\n| `ref` | `Ref<FlipPreviewerRef>` | - | Imperative handle for start/pause (hover mode only) |\n\n### FlipPreviewerImage\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `src` | `string` | Image source URL (required) |\n| `alt` | `string` | Alt text |\n| `href` | `string` | Link URL |\n| `title` | `string` | Link title |\n| `target` | `string` | Link target (e.g., `\"_blank\"`) |\n| `rel` | `string` | Link rel (e.g., `\"noopener noreferrer\"`) |\n\n### FlipPreviewerRef\n\n| Method | Description |\n|--------|-------------|\n| `start()` | Start the frame animation |\n| `pause()` | Pause and reset to the first frame |\n\n---\n\n## Styling\n\n### Default CSS\n\nThe included stylesheet uses `@layer components`, which works both as standalone CSS and with Tailwind CSS v4+. Import it once in your app:\n\n```tsx\nimport \"@cjboco/cj-image-flip-previewer/styles.css\";\n```\n\n### Using with Tailwind CSS\n\nSince the component styles are in the `components` layer, Tailwind utility classes automatically take priority - no `!important` needed. Just add classes via the `className` prop:\n\n```tsx\n<FlipPreviewer\n  className=\"rounded-lg shadow-md cursor-grab\"\n  width={320}\n  height={240}\n  images={images}\n/>\n```\n\nIf you prefer full Tailwind control and don't want the default stylesheet at all, simply skip the CSS import. The component applies its essential layout styles inline, so it will still function correctly. You can then style everything with utility classes.\n\n### CSS Custom Properties\n\nThe stylesheet exposes CSS variables for common customizations. Override them in your own CSS or Tailwind's `globals.css`:\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `--cj-flip-progress-height` | `4px` | Height of the preload progress bar |\n| `--cj-flip-progress-bg` | `rgba(0,0,0,0.3)` | Progress bar track background |\n| `--cj-flip-progress-color` | `#6bc4f7` | Progress bar fill color |\n| `--cj-flip-progress-speed` | `0.2s` | Progress bar transition speed |\n| `--cj-flip-debug-font-size` | `11px` | Debug overlay font size |\n| `--cj-flip-debug-bg` | `rgba(0,0,0,0.6)` | Debug overlay background |\n| `--cj-flip-debug-color` | `#fff` | Debug overlay text color |\n\n**Override globally:**\n\n```css\n:root {\n  --cj-flip-progress-color: hotpink;\n  --cj-flip-progress-height: 6px;\n}\n```\n\n**Override per instance:**\n\n```tsx\n<FlipPreviewer\n  style={{ '--cj-flip-progress-color': '#facc15' } as CSSProperties}\n  images={images}\n/>\n```\n\n### BEM Class Names\n\nFor more targeted CSS overrides, all elements use BEM-style class names:\n\n```css\n.cj-flip-previewer { }\n.cj-flip-previewer__img { }\n.cj-flip-previewer__link { }\n.cj-flip-previewer__debug { }\n.cj-flip-previewer__progress { }\n.cj-flip-previewer__progress-bar { }\n```\n\n---\n\n## Requirements\n\n- React 19+\n- React DOM 19+\n\n## License\n\nBSD-3-Clause\n\n## Author\n\nDoug Jones - [Creative Juices, Bo. Co.](https://www.cjboco.com)\n","readmeFilename":"README.md"}