`.\n\n## [1.4.11] - 2020-06-10\n\n### Fixed\n\n- Use aliased version of react-spring dependencies, fixes \"Cannot read property 'ref' of null\" error\n\n## [1.4.10] - 2020-05-03\n\n### Added\n\n- Optimize output bundles with Terser\n- Apply `babel-plugin-styled-components` babel plugin to optimize styled-components styles\n\n## [1.4.9] - 2020-05-02\n\n### Fixed\n\n- Fix partially off-screen image stage in ie11\n\n### Added\n\n- Upgrade to `rollup@2.7.6`, `react-use-gesture@7.0.15` and `@babel/****@7.9.6`\n\n## [1.4.8] - 2020-04-08\n\n### Fixed\n\n- Dropped `lodash.clamp` dependency\n- Call onPrev/onNext callbacks on all paging events, even at the beginning or end of image array to allow for infinite paging\n\n## [1.4.7] - 2020-04-05\n\n### Added\n\n- Lower distance and velocity gesture threshold for a paging between images\n- Allow click to zoom while a paging animation completes\n- Upgrade to `rollup@2.3.3` and `react-use-gesture@7.0.10`\n- Add `sideEffects: false` to `package.json`\n\n## [1.4.6] - 2020-04-04\n\n### Fixed\n\n- Handle edge case bugs with `singleClickToZoom` option\n- Fix undefined errors in panning drag handler on initial drags\n\n## [1.4.5] - 2020-03-27\n\n### Added\n\n- Add optional `singleClickToZoom` prop which allows single click/tap zooming on images\n\n## [1.4.4] - 2020-03-24\n\n### Fixed\n\n- Add orientationchange event listener for ios devices\n\n## [1.4.3] - 2020-03-23\n\n### Fixed\n\n- Drop lodash.merge\n- Fix image heights not adjusting on window resize\n\n## [1.4.2] - 2020-03-15\n\n### Fixed\n\n- Remove need for react-use-measure and @juggle/resize-observer\n\n## [1.4.1] - 2020-03-13\n\n### Fixed\n\n- Fix image stage height on Safari\n- Upgrade to react-use-gesture@7.0.5\n- Upgrade to rollup@2.0.6\n\n## [1.4.0] - 2020-03-7\n\n### BREAKING CHANGE\n\n- Replaced inline styles with styled-components. This library now has a peer dependency on `styled-components@5`\n\n### Fixed\n\n- Gigantic initial image size in Firefox and MS Edge\n- Click background to close functionality\n\n### Added\n\n- Vendor prefixed styles\n- A resize observer polyfill is now included to support MS Edge\n\n## [1.2.1] - 2020-03-5\n\n### Added\n\n- Added `renderImageOverlay` prop, renders a React component within the image stage, useful for creating UI overlays on top of the current image\n\n## [1.2.0] - 2020-02-14\n\n- Upgrade react-use-gesture v6 -> v7\n- Upgrade all deps\n\n## [1.1.7] - 2019-09-23\n\n### Fixed\n\n- Improved panning performance\n- Tweaked mousewheel swiping threshold\n- Upgrade to react-use-gesture v6\n\n## [1.1.4] - 2019-08-27\n\n### Added\n\n- Implement mousewheel paging of images\n\n## [1.1.3] - 2019-08-19\n\n### Fixed\n\n- Prevent vertical dragging from paging images\n- Switch to @react-spring/web package\n\n## [1.1.2] - 2019-08-17\n\n### Fixed\n\n- Properly dispose wheel event listener\n\n## [1.1.1] - 2019-08-14\n\n### Fixed\n\n- Adjusted \"pan out of bounds\" threshold\n\n## [1.1.0] - 2019-08-14\n\n### Added\n\n- Implement proper Ctrl + `Mousewheel` and `Trackpad Pinch` zooming\n\n## [1.0.1] - 2019-08-7\n\nAdd testing suite and travis-ci config\n\n## [1.0.0] - 2019-08-5\n\nUpgrade deps and release as stable\n\n## [0.0.3] - 2019-08-1\n\n### Changed\n\n- Renamed onClickNext => onNext\n- Renamed onClickPrev => onPrev\n\n## [0.0.2] - 2019-07-31\n\nInitial Release\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2019-present Tim Ellenberger\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"
},
{
"path": "README.md",
"content": "# react-spring-lightbox\n\n[](https://www.npmjs.com/package/react-spring-lightbox)\n[](https://github.com/tim-soft/react-spring-lightbox/blob/master/LICENSE)\n\n\n[](https://travis-ci.org/tim-soft/react-spring-lightbox)\n\nReact-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations.\n\n\n \n \n Docs \n \n Codesandbox \n
\n\n## ✨ Features\n\n- :point_up: `Mousewheel`, swipe or click+drag to page photos\n- :keyboard: Keyboard controls ← → Esc \n- :mouse2: Ctrl + `Mousewheel` or `Trackpad Pinch` to zoom\n- :mag_right: Double/Single-tap or double/single-click to zoom in/out\n- :ok_hand: Pinch to zoom\n- :point_left: Panning on zoomed-in images\n- :checkered_flag: Highly performant spring based animations via [react-spring](https://github.com/react-spring/react-spring)\n- No external CSS\n- Implement your own UI\n- Supports IE 11, Edge, Safari, Chrome, Firefox and Opera\n- Full typescript support\n- Supports any ` ()}\n\n /* Add styling */\n // className=\"cool-class\"\n // style={{ background: \"grey\" }}\n\n /* Handle closing */\n // onClose={handleClose}\n\n /* Use single or double click to zoom */\n // singleClickToZoom\n\n /* react-spring config for open/close animation */\n // pageTransitionConfig={{\n // from: { transform: \"scale(0.75)\", opacity: 0 },\n // enter: { transform: \"scale(1)\", opacity: 1 },\n // leave: { transform: \"scale(0.75)\", opacity: 0 },\n // config: { mass: 1, tension: 320, friction: 32 }\n // }}\n />\n );\n};\n\nexport default CoolLightbox;\n```\n\n## Props\n\n| Prop | Description |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| isOpen | Flag that dictates if the lightbox is open or closed |\n| onClose | Function that closes the Lightbox |\n| onPrev | Function that changes currentIndex to previous image in images |\n| onNext | Function that changes currentIndex to next image in images |\n| currentIndex | Index of image in images array that is currently shown |\n| renderHeader | A React component that renders above the image pager |\n| renderFooter | A React component that renders below the image pager |\n| renderPrevButton | A React component that is used for previous button in image pager |\n| renderNextButton | A React component that is used for next button in image pager |\n| renderImageOverlay | A React component that renders within the image stage, useful for creating UI overlays on top of the current image |\n| singleClickToZoom | Overrides the default behavior of double clicking causing an image zoom to a single click |\n| images | Array of image objects to be shown in Lightbox |\n| className | Classes are applied to the root lightbox component |\n| style | Inline styles are applied to the root lightbox component |\n| pageTransitionConfig | React-Spring useTransition config for page open/close animation |\n\n## Local Development\n\nClone the repo\n\n```bash\ngit clone https://github.com/tim-soft/react-spring-lightbox.git react-spring-lightbox\ncd react-spring-lightbox\n```\n\nSetup symlinks\n\n```bash\nyarn link\ncd example\nyarn link react-spring-lightbox\n```\n\nRun the library in development mode\n\n```bash\nyarn start\n```\n\nRun the example app in development mode\n\n```bash\ncd example\nyarn dev\n```\n\nChanges to the library code should hot reload in the demo app\n\n## License\n\nMIT © [Tim Ellenberger](https://github.com/tim-soft)\n"
},
{
"path": "example/README.md",
"content": "# react-spring-lightbox demo app\n\nThis directory contains a Next.js app useful for testing and developing `react-spring-lightbox`\n\nInstall dependencies\n\n```bash\nyarn install\n```\n\nRun locally with hot module reloading\n\n```bash\nyarn dev\n```\n"
},
{
"path": "example/components/GalleryLightbox/components/GridImage.jsx",
"content": "import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\n/**\n * A single image element in a masonry style image grid\n */\nconst GridImage = ({ index, key, left, onClick, photo, top }) => {\n const { alt, caption, height, src, width } = photo;\n return (\n onClick(e, { index })}\n style={{ height, left, top, width }}\n >\n \n \n {caption} \n \n \n \n );\n};\n\nGridImage.propTypes = {\n containerHeight: PropTypes.number.isRequired,\n index: PropTypes.number.isRequired,\n key: PropTypes.string.isRequired,\n left: PropTypes.number.isRequired,\n onClick: PropTypes.func.isRequired,\n photo: PropTypes.shape({\n alt: PropTypes.string.isRequired,\n caption: PropTypes.string.isRequired,\n height: PropTypes.number.isRequired,\n src: PropTypes.string.isRequired,\n width: PropTypes.number.isRequired,\n }).isRequired,\n top: PropTypes.number.isRequired,\n};\n\nexport default GridImage;\n\nconst Caption = styled.div`\n position: absolute;\n bottom: 0;\n width: 100%;\n background-color: ${({ theme }) => theme.accentColor};\n color: ${({ theme }) => theme.pageContentLinkHoverColor};\n h4 {\n text-align: center;\n margin: 1em 0;\n }\n`;\n\nconst OverlayContainer = styled.div`\n position: relative;\n height: 100%;\n overflow: hidden;\n`;\n\nconst ImageContainer = styled.div`\n display: block;\n position: absolute;\n cursor: pointer;\n border-width: 2px;\n border-color: transparent;\n border-style: solid;\n :hover {\n border-color: ${({ theme }) => theme.pageContentLinkHoverColor};\n }\n`;\n\nconst Image = styled.img`\n width: inherit;\n height: inherit;\n position: absolute;\n`;\n"
},
{
"path": "example/components/GalleryLightbox/components/LightboxArrowButton.jsx",
"content": "/* eslint-disable no-shadow */\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';\nimport { animated, useTransition } from '@react-spring/web';\nimport ButtonControl from './LightboxButtonControl';\n\nconst ArrowButton = ({ className, disabled, onClick, position }) => {\n const transitions = useTransition(!disabled, {\n enter: { opacity: 1 },\n from: { opacity: 0 },\n leave: { opacity: 0 },\n });\n\n return transitions(\n (props, item) =>\n item && (\n \n \n {position === 'left' && \n \n ),\n );\n};\n\nArrowButton.propTypes = {\n disabled: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n position: PropTypes.oneOf(['left', 'right']).isRequired,\n};\n\nArrowButton.defaultProps = {\n disabled: false,\n};\n\nexport default ArrowButton;\n\nconst StyledAnimatedDiv = styled(animated.div)`\n z-index: 999;\n`;\n\nconst Button = styled(ButtonControl)`\n position: absolute;\n top: 0;\n bottom: 0;\n left: ${({ position }) => (position === 'left' ? 0 : 'unset')};\n right: ${({ position }) => (position === 'right' ? 0 : 'unset')};\n`;\n"
},
{
"path": "example/components/GalleryLightbox/components/LightboxButtonControl.jsx",
"content": "import styled from 'styled-components';\n\nexport default styled.button`\n z-index: 10;\n background: none;\n border-style: none;\n font-size: 50px;\n cursor: pointer;\n padding: 0;\n margin: 0;\n color: ${({ theme }) => theme.pageContentFontColor};\n transition: color 0.2s linear;\n :hover {\n color: ${({ theme }) => theme.pageContentLinkHoverColor};\n }\n :focus {\n outline: none;\n color: ${({ theme }) => theme.pageContentLinkHoverColor};\n }\n`;\n"
},
{
"path": "example/components/GalleryLightbox/components/LightboxHeader.jsx",
"content": "import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { IoIosClose } from 'react-icons/io';\nimport Color from 'color';\nimport ButtonControl from './LightboxButtonControl';\n\nconst LightboxHeader = ({ currentIndex, galleryTitle, images, onClose }) => (\n \n \n {galleryTitle} \n \n {images[currentIndex].caption}\n \n \n\n \n \n {currentIndex + 1} / {images.length}\n \n \n \n \n \n);\n\nLightboxHeader.propTypes = {\n currentIndex: PropTypes.number.isRequired,\n galleryTitle: PropTypes.string.isRequired,\n images: PropTypes.arrayOf(\n PropTypes.shape({\n alt: PropTypes.string.isRequired,\n caption: PropTypes.string.isRequired,\n height: PropTypes.number,\n src: PropTypes.string.isRequired,\n width: PropTypes.number,\n }),\n ).isRequired,\n onClose: PropTypes.func.isRequired,\n};\n\nexport default LightboxHeader;\n\nconst GalleryHeading = styled.h2`\n margin: 0 0 5px 0;\n font-weight: normal;\n`;\n\nconst GallerySubheading = styled.h4`\n margin: 0;\n font-weight: normal;\n color: ${({ theme }) => theme.pageContentLinkHoverColor};\n`;\n\nconst PageIndicator = styled.span`\n white-space: nowrap;\n min-width: 60px;\n text-align: center;\n`;\n\nconst RightSideContainer = styled.div`\n width: 117px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst CloseButton = styled(ButtonControl)`\n height: 100%;\n display: flex;\n border-left-style: solid;\n border-left-width: 3px;\n border-left-color: ${({ theme }) => theme.headerNavFontColor};\n color: inherit;\n`;\n\nconst LeftSideDescriptionContainer = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n border-left-width: 3px;\n border-left-color: ${({ theme }) => theme.pageContentLinkHoverColor};\n border-left-style: solid;\n padding: 8px 0 8px 10px;\n`;\n\nconst TopHeaderBar = styled.header`\n z-index: 10;\n cursor: auto;\n display: flex;\n justify-content: space-between;\n padding: 10px 2px 10px 20px;\n color: ${({ theme }) => theme.headerNavFontColor};\n background-color: ${({ theme }) =>\n Color(theme.pageBackgroundColor).alpha(0.5).hsl().string()};\n > * {\n height: inherit;\n }\n`;\n"
},
{
"path": "example/components/GalleryLightbox/index.jsx",
"content": "import { FiHeart, FiPrinter, FiShare } from 'react-icons/fi';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Color from 'color';\nimport Gallery from 'react-photo-gallery';\nimport Lightbox from 'react-spring-lightbox';\nimport GridImage from './components/GridImage';\nimport LightboxHeader from './components/LightboxHeader';\nimport LightboxArrowButton from './components/LightboxArrowButton';\n\nclass BlogImageGallery extends React.Component {\n static propTypes = {\n galleryTitle: PropTypes.string.isRequired,\n imageMasonryDirection: PropTypes.oneOf(['column', 'row']),\n images: PropTypes.arrayOf(\n PropTypes.shape({\n alt: PropTypes.string.isRequired,\n caption: PropTypes.string.isRequired,\n height: PropTypes.number,\n src: PropTypes.string.isRequired,\n width: PropTypes.number,\n }),\n ).isRequired,\n };\n\n static defaultProps = {\n imageMasonryDirection: 'column',\n };\n\n constructor() {\n super();\n\n this.state = {\n clientSide: false,\n currentImageIndex: 0,\n lightboxIsOpen: false,\n };\n }\n\n componentDidMount() {\n this.setState({ clientSide: true });\n }\n\n openLightbox = (e, { index }) => {\n this.setState({\n currentImageIndex: index,\n lightboxIsOpen: true,\n });\n };\n\n closeLightbox = () => {\n this.setState({\n lightboxIsOpen: false,\n });\n };\n\n gotoPrevious = () => {\n const { currentImageIndex } = this.state;\n\n // If the current image isn't the first in the list, go to the previous\n if (currentImageIndex > 0) {\n this.setState({\n currentImageIndex: currentImageIndex - 1,\n });\n }\n };\n\n gotoNext = () => {\n const { images } = this.props;\n const { currentImageIndex } = this.state;\n\n // If the current image isn't the list in the list, go to the next\n if (currentImageIndex + 1 < images.length) {\n this.setState({\n currentImageIndex: currentImageIndex + 1,\n });\n }\n };\n\n /**\n * Sets breakpoints for column width based on containerWidth\n *\n * @int containerWidth The current width of the image grid\n */\n columnConfig = (containerWidth) => {\n let columns = 1;\n if (containerWidth >= 500) columns = 2;\n if (containerWidth >= 900) columns = 3;\n if (containerWidth >= 1500) columns = 4;\n\n return columns;\n };\n\n render() {\n const { clientSide, currentImageIndex, lightboxIsOpen } = this.state;\n const { galleryTitle, imageMasonryDirection, images } = this.props;\n\n // remove the height and width props for the lightbox images array\n const listboxImages = [...images].map((image) => {\n const newImage = { ...image };\n delete newImage.height;\n delete newImage.width;\n\n return newImage;\n });\n\n return (\n \n {clientSide && (\n (\n \n Create your own UI
\n \n )}\n renderNextButton={({ canNext }) => (\n \n );\n }\n}\n\nexport default BlogImageGallery;\n\nconst GalleryContainer = styled.div`\n overflow-y: auto;\n max-height: calc(100% - 4em);\n padding: 2em;\n`;\n\nconst StyledLightbox = styled(Lightbox)`\n background: ${({ theme }) =>\n Color(theme.accentColor).alpha(0.95).hsl().string()};\n * ::selection {\n background: ${({ theme }) => theme.pageContentSelectionColor};\n }\n * ::-moz-selection {\n background: ${({ theme }) =>\n new Color(theme.pageContentSelectionColor).darken(0.57).hex()};\n }\n`;\n\nconst ImageOverlay = styled.div`\n position: absolute;\n top: 0%;\n right: 0%;\n border: ${({ theme }) => theme.pageContentSelectionColor} 1px solid;\n background: rgba(39, 39, 39, 0.5);\n p {\n color: ${({ theme }) => theme.pageContentSelectionColor};\n text-align: center;\n font-weight: bold;\n font-size: 1.2em;\n margin: 0.5em 0;\n }\n svg {\n border: white 1px solid;\n fill: ${({ theme }) => theme.pageContentSelectionColor};\n margin: 10px;\n padding: 5px;\n :hover {\n border: ${({ theme }) => theme.pageContentSelectionColor} 1px solid;\n fill: ${({ theme }) =>\n new Color(theme.pageContentSelectionColor).darken(0.57).hex()};\n cursor: pointer;\n }\n }\n`;\n"
},
{
"path": "example/components/InlineLightbox/index.jsx",
"content": "import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport Lightbox from 'react-spring-lightbox';\nimport LightboxArrowButton from '../GalleryLightbox/components/LightboxArrowButton';\n\nconst InlineLightbox = ({ images }) => {\n const [currentImageIndex, setCurrentImageIndex] = React.useState(0);\n const inlineCarouselElement = React.useRef();\n\n React.useEffect(() => {\n inlineCarouselElement?.current?.addEventListener('wheel', preventWheel);\n\n setCurrentImageIndex(0);\n }, [inlineCarouselElement, images]);\n\n const preventWheel = (e) => {\n e.preventDefault();\n e.stopPropagation();\n return false;\n };\n\n const canPrev = currentImageIndex > 0;\n const canNext = currentImageIndex + 1 < images.length;\n\n const gotoNext = () => {\n canNext ? setCurrentImageIndex(currentImageIndex + 1) : () => null;\n };\n\n const gotoPrevious = () => {\n canPrev ? setCurrentImageIndex(currentImageIndex - 1) : null;\n };\n\n return (\n \n (\n \n );\n};\n\nexport default InlineLightbox;\n\nInlineLightbox.propTypes = {\n images: PropTypes.arrayOf(\n PropTypes.shape({\n alt: PropTypes.string.isRequired,\n caption: PropTypes.string.isRequired,\n height: PropTypes.number,\n src: PropTypes.string.isRequired,\n width: PropTypes.number,\n }),\n ).isRequired,\n};\n\nconst Container = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n height: 384px;\n overflow: hidden;\n`;\n\nconst StyledLightboxArrowButton = styled(LightboxArrowButton)`\n z-index: 10;\n button {\n font-size: 25px;\n }\n`;\n"
},
{
"path": "example/next-env.d.ts",
"content": "/// \n \n \n Gallery Lightbox \n \n \n Inline Lightbox \n \n \n 🎉🎉Inline content🎉🎉\n \n \n 🎉🎉Inline content🎉🎉\n \n \n \n setInlineImages(getRandomImages(inlineImages.length))\n }\n >\n Generate new images\n \n {\n if (inlineImages.length === 1) {\n setInlineImages(getRandomImages(15));\n } else {\n setInlineImages(getRandomImages(1));\n }\n }}\n >\n Switch Image Array\n \n \n \n );\n};\n\nexport default HomePage;\n\nconst Container = styled.div`\n height: 100%;\n width: 100%;\n user-select: none;\n background: #272727;\n color: #fff;\n padding: 50px 0;\n`;\n\nconst Button = styled.button`\n border-radius: 10px;\n background: teal;\n color: #fff;\n padding: 16px 10px;\n margin: 20px auto;\n cursor: pointer;\n :hover {\n background: darkblue;\n }\n :active {\n background: darkseagreen;\n }\n`;\n\nconst GalleryLightboxExample = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nconst InlineLightboxExampleContainer = styled.div`\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n`;\nconst InlineLightboxExample = styled.div`\n width: 100%;\n display: flex;\n justify-content: center;\n`;\n\nconst OtherInlineContent = styled.div`\n width: 400px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n background: blueviolet;\n`;\n\nconst StyledH2 = styled.h2`\n text-align: center;\n`;\n"
},
{
"path": "example/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"esModuleInterop\": true,\n \"incremental\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"noEmit\": true,\n \"resolveJsonModule\": true,\n \"skipLibCheck\": true,\n \"strict\": false\n },\n \"exclude\": [\"node_modules\"],\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"]\n}\n"
},
{
"path": "jest-setup.ts",
"content": "import '@testing-library/jest-dom';\n"
},
{
"path": "jest.config.js",
"content": "/**\n * Configure Jest as the test runner for @testing-library\n *\n * @see https://jestjs.io/docs/en/configuration\n */\nmodule.exports = {\n collectCoverage: true,\n coveragePathIgnorePatterns: ['/node_modules/', '/__tests__/'],\n preset: 'ts-jest',\n setupFilesAfterEnv: ['babel-polyfill', '/jest-setup.ts'],\n testEnvironment: 'jsdom',\n testMatch: ['**/__tests__/**/*.(spec|test).[jt]s?(x)'],\n transform: {\n '^.+\\\\.(js|jsx)$': 'babel-jest',\n '^.+\\\\.(ts|tsx)?$': 'ts-jest',\n },\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-spring-lightbox\",\n \"version\": \"1.8.0\",\n \"description\": \"A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.\",\n \"author\": \"Tim Ellenberger \",\n \"license\": \"MIT\",\n \"repository\": \"tim-soft/react-spring-lightbox\",\n \"sideEffects\": false,\n \"bugs\": {\n \"url\": \"https://github.com/tim-soft/react-spring-lightbox/issues\"\n },\n \"homepage\": \"https://timellenberger.com\",\n \"keywords\": [\n \"react\",\n \"spring\",\n \"lightbox\",\n \"modal\",\n \"gallery\",\n \"touch\",\n \"gestures\",\n \"images\"\n ],\n \"main\": \"dist/index.cjs.js\",\n \"types\": \"dist/index.d.ts\",\n \"engines\": {\n \"node\": \">=16\",\n \"npm\": \">=7\"\n },\n \"scripts\": {\n \"fix\": \"yarn fix:eslint && yarn fix:prettier\",\n \"fix:eslint\": \"eslint --fix \\\"**/*.*\\\"\",\n \"fix:prettier\": \"prettier --write \\\"**/*.*\\\"\",\n \"lint\": \"yarn lint:eslint && yarn lint:prettier && yarn lint:ts\",\n \"lint:eslint\": \"eslint \\\"**/*.*\\\"\",\n \"lint:prettier\": \"prettier --check \\\"**/*.*\\\"\",\n \"lint:ts\": \"npx tsc --noEmit -p .\",\n \"test\": \"jest\",\n \"test:watch\": \"jest --watch\",\n \"build\": \"rollup --config && yarn run build:types\",\n \"build:types\": \"tsc --project tsconfig.buildtypes.json --emitDeclarationOnly\",\n \"start\": \"rollup --config --watch\",\n \"prepare\": \"yarn run build\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n },\n \"lint-staged\": {\n \"*.{json,md}\": [\n \"prettier --write\",\n \"git add --force\"\n ],\n \"*.{js, jsx}\": [\n \"prettier --write\",\n \"eslint --no-ignore --fix\",\n \"git add --force\"\n ]\n },\n \"peerDependencies\": {\n \"react\": \">=16.8\",\n \"react-dom\": \">=16.8\",\n \"styled-components\": \">=5.X\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.23.0\",\n \"@babel/plugin-transform-class-properties\": \"^7.18.6\",\n \"@babel/plugin-transform-object-rest-spread\": \"^7.20.7\",\n \"@babel/plugin-transform-runtime\": \"^7.22.15\",\n \"@babel/preset-env\": \"^7.22.20\",\n \"@babel/preset-react\": \"^7.22.15\",\n \"@babel/preset-typescript\": \"^7.23.0\",\n \"@rollup/plugin-babel\": \"^6.0.4\",\n \"@rollup/plugin-commonjs\": \"^25.0.5\",\n \"@rollup/plugin-node-resolve\": \"^15.2.2\",\n \"@rollup/plugin-terser\": \"^0.4.4\",\n \"@testing-library/jest-dom\": \"^6.1.3\",\n \"@testing-library/react\": \"^14.0.0\",\n \"@types/jest\": \"^29.5.5\",\n \"@types/react\": \"^18.2.25\",\n \"@types/react-dom\": \"^18.2.10\",\n \"@types/styled-components\": \"5.1.28\",\n \"@typescript-eslint/eslint-plugin\": \"^6.7.4\",\n \"@typescript-eslint/parser\": \"^6.7.4\",\n \"babel-eslint\": \"10.1.0\",\n \"babel-polyfill\": \"^6.26.0\",\n \"cross-env\": \"^7.0.3\",\n \"eslint\": \"^8.50.0\",\n \"eslint-config-prettier\": \"^9.0.0\",\n \"eslint-import-resolver-typescript\": \"^3.6.1\",\n \"eslint-plugin-import\": \"^2.28.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.7.1\",\n \"eslint-plugin-prettier\": \"^5.0.0\",\n \"eslint-plugin-react\": \"^7.33.2\",\n \"eslint-plugin-react-hooks\": \"^4.6.0\",\n \"eslint-plugin-sort-destructure-keys\": \"^1.5.0\",\n \"husky\": \"^4.3.8\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"lint-staged\": \"^10.5.4\",\n \"prettier\": \"^3.0.3\",\n \"react\": \"^18\",\n \"react-dom\": \"^18\",\n \"react-is\": \"^18\",\n \"rollup\": \"^3.29.4\",\n \"rollup-plugin-filesize\": \"^10.0.0\",\n \"rollup-plugin-node-externals\": \"^6.1.2\",\n \"styled-components\": \"^5.3.5\",\n \"ts-jest\": \"^29.1.1\",\n \"tslib\": \"^2.6.2\",\n \"typescript\": \"^5.2.2\"\n },\n \"files\": [\n \"dist\"\n ],\n \"dependencies\": {\n \"@babel/runtime\": \"^7.23.1\",\n \"@react-spring/web\": \"^9.7.3\",\n \"react-use-gesture\": \"9.1.3\"\n }\n}\n"
},
{
"path": "rollup.config.mjs",
"content": "import commonjs from '@rollup/plugin-commonjs';\nimport filesize from 'rollup-plugin-filesize';\nimport { nodeResolve } from '@rollup/plugin-node-resolve';\nimport { babel } from '@rollup/plugin-babel';\nimport terser from '@rollup/plugin-terser';\nimport { nodeExternals } from 'rollup-plugin-node-externals';\n\nexport default {\n input: './src/index.tsx',\n output: [\n {\n exports: 'default',\n file: 'dist/index.cjs.js',\n format: 'cjs',\n interop: 'auto',\n sourcemap: true,\n },\n ],\n plugins: [\n nodeExternals(),\n nodeResolve(),\n commonjs({\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n include: 'node_modules/**',\n }),\n babel({\n babelHelpers: 'runtime',\n exclude: 'node_modules/**',\n extensions: ['.js', '.jsx', '.ts', '.tsx'],\n }),\n terser(),\n filesize(),\n ],\n};\n"
},
{
"path": "src/__tests__/components/SimpleLightbox.tsx",
"content": "import React, { useState } from 'react';\nimport Lightbox, { ImagesListType } from '../../index';\n\nconst images: ImagesListType = [\n {\n alt: 'Windows 10 Dark Mode Setting',\n src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',\n },\n {\n alt: 'macOS Mojave Dark Mode Setting',\n src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',\n },\n {\n alt: 'Android 9.0 Dark Mode Setting',\n src: 'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',\n },\n];\n\nconst SimpleLightbox = (\n props: Partial>,\n) => {\n const [currentImageIndex, setCurrentIndex] = useState(0);\n\n const gotoPrevious = () =>\n currentImageIndex > 0 && setCurrentIndex(currentImageIndex - 1);\n\n const gotoNext = () =>\n currentImageIndex + 1 < images.length &&\n setCurrentIndex(currentImageIndex + 1);\n\n return (\n null}\n onNext={gotoNext}\n onPrev={gotoPrevious}\n {...props}\n />\n );\n};\n\nexport default SimpleLightbox;\n"
},
{
"path": "src/__tests__/lightbox.test.tsx",
"content": "import React from 'react';\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport Lightbox from './components/SimpleLightbox';\n\ndescribe('Lightbox', () => {\n describe('CreatePortal', () => {\n test('creates portal on render', () => {\n render( }\n />,\n );\n\n const lightboxContainer = screen.getByTestId('lightbox-container');\n const lightboxHeader = screen.getByTestId('header');\n\n // Lightbox container should have a header and pager body\n expect(lightboxContainer.childElementCount).toBe(2);\n expect(lightboxContainer).toBeInTheDocument();\n\n // Header exists in the lightbox\n expect(lightboxHeader).toBeInTheDocument();\n });\n });\n\n describe('renderFooter', () => {\n test('renders custom footer', () => {\n render(\n }\n />,\n );\n\n const lightboxContainer = screen.getByTestId('lightbox-container');\n const lightboxFooter = screen.getByTestId('footer');\n\n // Lightbox container exists and should have a pager body and footer\n expect(lightboxContainer.childElementCount).toBe(2);\n expect(lightboxContainer).toBeInTheDocument();\n\n // Footer exists in the lightbox\n expect(lightboxFooter).toBeInTheDocument();\n });\n });\n\n describe('renderNextButton/renderPrevButton', () => {\n test('renders custom prev/next buttons', () => {\n render(\n (\n \n *\n * Child components are rendered on the client side only\n\n * @see https://reactjs.org/docs/portals.html\n */\nclass CreatePortal extends React.Component {\n portalContainer: HTMLDivElement;\n body: HTMLElement;\n\n // Only executes on the client-side\n componentDidMount() {\n // Get the document body\n this.body = document.body;\n\n // Create a container
for React Portal\n this.portalContainer = document.createElement('div');\n this.portalContainer.setAttribute('class', 'lightbox-portal');\n\n // Append the container to the document body\n this.body.appendChild(this.portalContainer);\n\n // Force a re-render as we're on the client side now\n // children prop will render to portalContainer\n this.forceUpdate();\n\n // Add event listener to prevent trackpad/ctrl+mousewheel zooming of lightbox\n // Zooming is handled specifically within /ImageStage/components/Image\n this.portalContainer.addEventListener('wheel', this.preventWheel);\n }\n\n componentWillUnmount() {\n // Remove wheel event listener\n this.portalContainer.removeEventListener('wheel', this.preventWheel);\n\n // Cleanup Portal from DOM\n this.body.removeChild(this.portalContainer);\n }\n\n preventWheel = (e: WheelEvent) => e.preventDefault();\n\n render() {\n // Return null during SSR\n if (this.portalContainer === undefined) return null;\n\n const { children } = this.props;\n\n return <>{ReactDOM.createPortal(children, this.portalContainer)};\n }\n}\n\nexport default CreatePortal;\n"
},
{
"path": "src/components/ImageStage/components/Image/index.tsx",
"content": "import { animated, to, useSpring } from '@react-spring/web';\nimport {\n getTranslateOffsetsFromScale,\n imageIsOutOfBounds,\n useDoubleClick,\n} from '../../utils';\nimport { useGesture } from 'react-use-gesture';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled, { AnyStyledComponent } from 'styled-components';\nimport type { ImagesListItem } from '../../../../types/ImagesList';\n\nconst defaultImageTransform = {\n pinching: false,\n scale: 1,\n translateX: 0,\n translateY: 0,\n};\n\ntype IImageProps = {\n /** Any valid (false);\n const imageRef = useRef(null);\n\n /**\n * Animates scale and translate offsets of Image as they change in gestures\n *\n * @see https://www.react-spring.io/docs/hooks/use-spring\n */\n const [{ scale, translateX, translateY }, springApi] = useSpring(() => ({\n ...defaultImageTransform,\n onChange: (result, instance) => {\n if (result.value.scale < 1 || !result.value.pinching) {\n instance.start(defaultImageTransform);\n }\n\n if (result.value.scale > 1 && imageIsOutOfBounds(imageRef)) {\n instance.start(defaultImageTransform);\n }\n },\n // Enable dragging in ImagePager if image is at the default size\n onRest: (result, instance) => {\n if (result.value.scale === 1) {\n instance.start(defaultImageTransform);\n setDisableDrag(false);\n }\n },\n }));\n\n // Reset scale of this image when dragging to new image in ImagePager\n useEffect(() => {\n if (!isCurrentImage && scale.get() !== 1) {\n springApi.start(defaultImageTransform);\n }\n }, [isCurrentImage, scale, springApi]);\n\n /**\n * Update Image scale and translate offsets during pinch/pan gestures\n *\n * @see https://github.com/react-spring/react-use-gesture#usegesture-hook-supporting-multiple-gestures-at-once\n */\n useGesture(\n {\n onDrag: ({\n cancel,\n first,\n memo = { initialTranslateX: 0, initialTranslateY: 0 },\n movement: [xMovement, yMovement],\n pinching,\n tap,\n touches,\n }) => {\n if (pagerIsDragging || scale.get() === 1 || tap) {\n return;\n }\n\n // Disable click to zoom during drag\n if (xMovement && yMovement && !isPanningImage) {\n setIsPanningImage(true);\n }\n\n if (touches > 1) {\n return;\n }\n if (pinching || scale.get() <= 1) {\n return;\n }\n\n // Prevent dragging image out of viewport\n if (scale.get() > 1 && imageIsOutOfBounds(imageRef)) {\n cancel();\n return;\n } else {\n if (first) {\n return {\n initialTranslateX: translateX.get(),\n initialTranslateY: translateY.get(),\n };\n }\n\n // Translate image from dragging\n springApi.start({\n translateX: memo.initialTranslateX + xMovement,\n translateY: memo.initialTranslateY + yMovement,\n });\n\n return memo;\n }\n },\n onDragEnd: ({ memo }) => {\n if (memo !== undefined) {\n // Add small timeout to prevent onClick handler from firing after drag\n setTimeout(() => setIsPanningImage(false), 100);\n }\n },\n onPinch: ({\n cancel,\n ctrlKey,\n event,\n last,\n movement: [xMovement],\n origin: [touchOriginX, touchOriginY],\n }) => {\n if (pagerIsDragging) {\n return;\n }\n\n // Prevent ImagePager from registering isDragging\n setDisableDrag(true);\n\n // Disable click to zoom during pinch\n if (xMovement && !isPanningImage) {\n setIsPanningImage(true);\n }\n\n // Don't calculate new translate offsets on final frame\n if (last) {\n cancel();\n return;\n }\n\n // Speed up pinch zoom when using mouse versus touch\n const SCALE_FACTOR = ctrlKey ? 1000 : 250;\n const pinchScale = scale.get() + xMovement / SCALE_FACTOR;\n const pinchDelta = pinchScale - scale.get();\n\n /**\n * Calculate touch origin for pinch/zoom\n *\n * if event is a touch event (React.TouchEvent, TouchEvent or WebKitGestureEvent) use touchOriginX/Y\n * if event is a wheel event (React.WheelEvent or WheelEvent) use the mouse cursor's clientX/Y\n */\n let touchOrigin: [touchOriginX: number, touchOriginY: number] =\n [touchOriginX, touchOriginY];\n if ('clientX' in event && 'clientY' in event && ctrlKey) {\n touchOrigin = [event.clientX, event.clientY];\n }\n\n // Calculate the amount of x, y translate offset needed to\n // zoom-in to point as image scale grows\n const [newTranslateX, newTranslateY] =\n getTranslateOffsetsFromScale({\n currentTranslate: [translateX.get(), translateY.get()],\n imageRef,\n pinchDelta,\n scale: scale.get(),\n // Use the [x, y] coords of mouse if a trackpad or ctrl + wheel event\n // Otherwise use touch origin\n touchOrigin,\n });\n\n // Restrict the amount of zoom between half and 3x image size\n if (pinchScale < 0.5) {\n springApi.start({ pinching: true, scale: 0.5 });\n } else if (pinchScale > 3.0) {\n springApi.start({ pinching: true, scale: 3.0 });\n } else {\n springApi.start({\n pinching: true,\n scale: pinchScale,\n translateX: newTranslateX,\n translateY: newTranslateY,\n });\n }\n },\n onPinchEnd: () => {\n if (!pagerIsDragging) {\n if (scale.get() > 1) {\n setDisableDrag(true);\n } else {\n springApi.start(defaultImageTransform);\n }\n // Add small timeout to prevent onClick handler from firing after panning\n setTimeout(() => setIsPanningImage(false), 100);\n }\n },\n },\n /**\n * useGesture config\n * @see https://github.com/react-spring/react-use-gesture#usegesture-config\n */\n {\n domTarget: imageRef as React.RefObject,\n drag: {\n filterTaps: true,\n },\n enabled: !inline,\n eventOptions: {\n passive: false,\n },\n },\n );\n\n // Handle click/tap on image\n useDoubleClick({\n [singleClickToZoom ? 'onSingleClick' : 'onDoubleClick']: (\n e: MouseEvent,\n ) => {\n if (pagerIsDragging || isPanningImage) {\n e.stopPropagation();\n return;\n }\n\n // If tapped while already zoomed-in, zoom out to default scale\n if (scale.get() !== 1) {\n springApi.start(defaultImageTransform);\n return;\n }\n\n // Zoom-in to origin of click on image\n const { clientX: touchOriginX, clientY: touchOriginY } = e;\n const pinchScale = scale.get() + 1;\n const pinchDelta = pinchScale - scale.get();\n\n // Calculate the amount of x, y translate offset needed to\n // zoom-in to point as image scale grows\n const [newTranslateX, newTranslateY] = getTranslateOffsetsFromScale(\n {\n currentTranslate: [translateX.get(), translateY.get()],\n imageRef,\n pinchDelta,\n scale: scale.get(),\n touchOrigin: [touchOriginX, touchOriginY],\n },\n );\n\n // Disable dragging in pager\n setDisableDrag(true);\n springApi.start({\n pinching: true,\n scale: pinchScale,\n translateX: newTranslateX,\n translateY: newTranslateY,\n });\n },\n enabled: !inline,\n latency: singleClickToZoom ? 0 : 200,\n ref: imageRef,\n });\n\n return (\n ) => {\n // Don't close lighbox when clicking image\n e.stopPropagation();\n e.nativeEvent.stopImmediatePropagation();\n }}\n onDragStart={(e: React.DragEvent) => {\n // Disable image ghost dragging in firefox\n e.preventDefault();\n }}\n ref={imageRef}\n style={{\n ...imgStyleProp,\n maxHeight: pagerHeight,\n transform: to(\n [scale, translateX, translateY],\n (s, x, y) => `translate(${x}px, ${y}px) scale(${s})`,\n ),\n ...(isCurrentImage && { willChange: 'transform' }),\n }}\n // Include any valid img html attributes provided in the )}\n />\n );\n};\n\nImage.displayName = 'Image';\n\nexport default Image;\n\nconst AnimatedImage = styled(animated.img as AnyStyledComponent)`\n width: auto;\n height: auto;\n max-width: 100%;\n user-select: none;\n touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};\n ::selection {\n background: none;\n }\n`;\n"
},
{
"path": "src/components/ImageStage/components/ImagePager/index.tsx",
"content": "import { animated, useSprings } from '@react-spring/web';\nimport { useGesture } from 'react-use-gesture';\nimport Image from '../Image';\nimport React, { useEffect, useRef, useState } from 'react';\nimport styled, { AnyStyledComponent } from 'styled-components';\nimport type { ImagesList } from '../../../../types/ImagesList';\n\ntype IImagePager = {\n /** Index of image in images array that is currently shown */\n currentIndex: number;\n /** image stage height */\n imageStageHeight: number;\n /** image stage width */\n imageStageWidth: number;\n /** Array of image objects to be shown in Lightbox */\n images: ImagesList;\n /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */\n inline: boolean;\n /** Function that closes the Lightbox */\n onClose?: () => void;\n /** Function that can be called to disable dragging in the pager */\n onNext: () => void;\n /** True if this image is currently shown in pager, otherwise false */\n onPrev: () => void;\n /** A React component that renders inside the image stage, useful for making overlays over the image */\n renderImageOverlay: () => React.ReactNode;\n /** Overrides the default behavior of double clicking causing an image zoom to a single click */\n singleClickToZoom: boolean;\n};\n\n/**\n * Gesture controlled surface that animates prev/next page changes via spring physics.\n */\nconst ImagePager = ({\n currentIndex,\n images,\n imageStageHeight,\n imageStageWidth,\n inline,\n onClose,\n onNext,\n onPrev,\n renderImageOverlay,\n singleClickToZoom,\n}: IImagePager) => {\n const firstRender = useRef(true);\n\n const [disableDrag, setDisableDrag] = useState(false);\n const [pagerHeight, setPagerHeight] = useState<'100%' | number>('100%');\n const [isDragging, setIsDragging] = useState(false);\n\n //Determine the absolute height of the image pager\n useEffect(() => {\n const currPagerHeight = inline\n ? imageStageHeight\n : imageStageHeight - 50;\n\n if (currPagerHeight !== pagerHeight) {\n setPagerHeight(currPagerHeight);\n }\n }, [inline, pagerHeight, imageStageHeight]);\n\n // Generate page positions based on current index\n const getPagePositions = React.useCallback(\n (i: number, down = false, xDelta = 0) => {\n const x =\n (i - currentIndex) * imageStageWidth + (down ? xDelta : 0);\n\n if (i < currentIndex - 1 || i > currentIndex + 1) {\n return { display: 'none', x };\n }\n return { display: 'flex', x };\n },\n [currentIndex, imageStageWidth],\n );\n\n /**\n * Animates translateX of all images at the same time\n *\n * @see https://www.react-spring.io/docs/hooks/use-springs\n */\n const [pagerSprings, springsApi] = useSprings(images.length, (i) =>\n getPagePositions(i),\n );\n\n // Animate page change if currentIndex changes\n useEffect(() => {\n // No need to set page position for initial render\n if (firstRender.current) {\n firstRender.current = false;\n return;\n }\n // Update page positions after prev/next page state change\n springsApi.start((i) => getPagePositions(i));\n }, [currentIndex, getPagePositions, springsApi]);\n\n /**\n * Update each Image's visibility and translateX offset during dragging\n *\n * @see https://github.com/react-spring/react-use-gesture\n */\n const bind = useGesture(\n {\n onDrag: ({\n active,\n cancel,\n direction: [xDir],\n distance,\n down,\n movement: [xMovement],\n tap,\n touches,\n velocity,\n }) => {\n // Disable drag if Image has been zoomed in to allow for panning\n if (disableDrag || xMovement === 0 || tap) {\n return;\n }\n if (!isDragging) {\n setIsDragging(true);\n }\n\n const isHorizontalDrag = Math.abs(xDir) > 0.7;\n const draggedFarEnough =\n down &&\n isHorizontalDrag &&\n distance > imageStageWidth / 3.5;\n const draggedFastEnough =\n down && isHorizontalDrag && velocity > 2;\n\n // Handle next/prev image from valid drag\n if ((draggedFarEnough || draggedFastEnough) && active) {\n const goToIndex = xDir > 0 ? -1 : 1;\n\n // Cancel gesture event\n cancel();\n\n if (goToIndex > 0) {\n onNext();\n } else if (goToIndex < 0) {\n onPrev();\n }\n\n return;\n }\n\n // Don't move pager during two+ finger touch events, i.e. pinch-zoom\n if (touches > 1) {\n cancel();\n return;\n }\n\n // Update page x-coordinates for single finger/mouse gestures\n springsApi.start((i) => getPagePositions(i, down, xMovement));\n return;\n },\n onDragEnd: () => {\n if (isDragging) {\n springsApi.start((i) => getPagePositions(i));\n // Add small timeout buffer to prevent event handlers from firing in child Images\n setTimeout(() => setIsDragging(false), 100);\n }\n },\n onWheel: ({ ctrlKey, direction: [xDir, yDir], velocity }) => {\n // Disable drag if Image has been zoomed in to allow for panning\n if (ctrlKey || disableDrag || velocity === 0) {\n return;\n }\n\n if (!isDragging) {\n setIsDragging(true);\n }\n\n const draggedFastEnough = velocity > 1.1;\n\n // Handle next/prev image from valid drag\n if (draggedFastEnough) {\n const goToIndex = xDir + yDir > 0 ? -1 : 1;\n\n if (goToIndex > 0) {\n onNext();\n } else if (goToIndex < 0) {\n onPrev();\n }\n }\n },\n onWheelEnd: () => {\n springsApi.start((i) => getPagePositions(i));\n // Add small timeout buffer to prevent event handlers from firing in child Images\n setTimeout(() => setIsDragging(false), 100);\n },\n },\n {\n drag: {\n filterTaps: true,\n },\n wheel: {\n enabled: !inline,\n },\n },\n );\n\n return (\n \n {pagerSprings.map(({ display, x }, i) => (\n {\n if (onClose) {\n return (\n Math.abs(x.get()) < 1 &&\n !disableDrag &&\n onClose()\n );\n }\n }}\n role=\"presentation\"\n style={{\n display,\n transform: x.to(\n (xInterp: number) => `translateX(${xInterp}px)`,\n ),\n }}\n >\n \n \n {\n e.stopPropagation();\n e.nativeEvent.stopImmediatePropagation();\n }}\n >\n \n \n \n ))}\n \n );\n};\n\nImagePager.displayName = 'ImagePager';\n\nexport default ImagePager;\n\nconst ImagePagerContainer = styled.div`\n height: 100%;\n width: 100%;\n`;\n\nconst PagerInnerContentWrapper = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n`;\n\nconst PagerContentWrapper = styled.div`\n width: 100%;\n display: flex;\n justify-content: center;\n`;\n\nconst AnimatedImagePager = styled(animated.span as AnyStyledComponent)<{\n $inline: boolean;\n}>`\n position: absolute;\n top: 0px;\n left: 0px;\n right: 0px;\n bottom: 0px;\n height: 100%;\n width: 100%;\n will-change: transform;\n touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n`;\n\nconst ImageContainer = styled.div<{ $inline: boolean }>`\n position: relative;\n touch-action: ${({ $inline }) => (!$inline ? 'none' : 'pan-y')};\n user-select: none;\n display: flex;\n justify-content: center;\n width: 100%;\n`;\n"
},
{
"path": "src/components/ImageStage/components/SSRImagePager/SSRImagePager.tsx",
"content": "import type { ImagesList } from '../../../../types/ImagesList';\nimport styled, { css } from 'styled-components';\nimport * as React from 'react';\n\ntype ISSRImagePagerProps = {\n currentIndex: number;\n images: ImagesList;\n};\n\nconst SSRImagePager = ({ currentIndex, images }: ISSRImagePagerProps) => {\n return (\n \n {images.map(({ alt, src }, i) => {\n return (\n \n );\n};\n\nexport default SSRImagePager;\n\nconst ImagePagerContainer = styled.div`\n width: 100%;\n height: inherit;\n`;\n\nconst Image = styled.img<{ $isCurrentImage: boolean }>`\n ${({ $isCurrentImage }) =>\n !$isCurrentImage &&\n css`\n visibility: hidden;\n display: none;\n `}\n height:100%;\n width: 100%;\n object-fit: contain;\n`;\n"
},
{
"path": "src/components/ImageStage/index.tsx",
"content": "import ImagePager from './components/ImagePager';\nimport React from 'react';\nimport styled from 'styled-components';\nimport useRefSize from './utils/useRefSize';\nimport type { ImagesList } from '../../types/ImagesList';\nimport SSRImagePager from './components/SSRImagePager/SSRImagePager';\n\ntype IImageStageProps = {\n /** classnames are applied to the root ImageStage component */\n className?: string;\n /** Index of image in images array that is currently shown */\n currentIndex: number;\n /** Array of image objects to be shown in Lightbox */\n images: ImagesList;\n /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */\n inline: boolean;\n /** Function that closes the Lightbox */\n onClose?: () => void;\n /** Function that can be called to disable dragging in the pager */\n onNext: () => void;\n /** True if this image is currently shown in pager, otherwise false */\n onPrev: () => void;\n /** A React component that renders inside the image stage, useful for making overlays over the image */\n renderImageOverlay: () => React.ReactNode;\n /** A React component that is used for next button in image pager */\n renderNextButton: ({ canNext }: { canNext: boolean }) => React.ReactNode;\n /** A React component that is used for previous button in image pager */\n renderPrevButton: ({ canPrev }: { canPrev: boolean }) => React.ReactNode;\n /** Overrides the default behavior of double clicking causing an image zoom to a single click */\n singleClickToZoom: boolean;\n};\n\n/**\n * Containing element for ImagePager and prev/next button controls\n */\nconst ImageStage = ({\n className = '',\n currentIndex,\n images,\n inline,\n onClose,\n onNext,\n onPrev,\n renderImageOverlay,\n renderNextButton,\n renderPrevButton,\n singleClickToZoom,\n}: IImageStageProps) => {\n // Extra sanity check that the next/prev image exists before moving to it\n const canPrev = currentIndex > 0;\n const canNext = currentIndex + 1 < images.length;\n\n const onNextImage = canNext ? onNext : () => null;\n const onPrevImage = canPrev ? onPrev : () => null;\n\n const [{ height: containerHeight, width: containerWidth }, containerRef] =\n useRefSize();\n\n return (\n \n {renderPrevButton({ canPrev })}\n {containerWidth ? (\n ;\n /** The amount of change in the new transform scale */\n pinchDelta: number;\n /** The current transform scale of image */\n scale: number;\n /** The [x,y] coordinates of the zoom origin */\n touchOrigin: [touchOriginX: number, touchOriginY: number];\n};\n\ntype ITranslateOffsetsReturnType = [translateX: number, translateY: number];\n\n/**\n * Calculates the the translate(x,y) coordinates needed to zoom-in\n * to a point in an image.\n *\n * @returns {array} The next [x,y] translate values to apply to image\n */\nconst getTranslateOffsetsFromScale = ({\n currentTranslate: [translateX, translateY],\n imageRef,\n pinchDelta,\n scale,\n touchOrigin: [touchOriginX, touchOriginY],\n}: IGetTranslateOffsetsFromScale): ITranslateOffsetsReturnType => {\n if (!imageRef?.current) {\n return [0, 0];\n }\n\n const {\n height: imageHeight,\n left: imageTopLeftX,\n top: imageTopLeftY,\n width: imageWidth,\n } = imageRef.current?.getBoundingClientRect();\n\n // Get the (x,y) touch position relative to image origin at the current scale\n const imageCoordX = (touchOriginX - imageTopLeftX - imageWidth / 2) / scale;\n const imageCoordY =\n (touchOriginY - imageTopLeftY - imageHeight / 2) / scale;\n\n // Calculate translateX/Y offset at the next scale to zoom to touch position\n const newTranslateX = -imageCoordX * pinchDelta + translateX;\n const newTranslateY = -imageCoordY * pinchDelta + translateY;\n\n return [newTranslateX, newTranslateY];\n};\n\nexport default getTranslateOffsetsFromScale;\n"
},
{
"path": "src/components/ImageStage/utils/imageIsOutOfBounds.ts",
"content": "/**\n * Determines if the provided image is within the viewport\n *\n * @returns True if image needs to be resized to fit viewport, otherwise false\n */\nconst imageIsOutOfBounds = (\n imageRef: React.RefObject,\n): boolean => {\n // If no ref is provided, return false\n if (!imageRef.current) {\n return false;\n }\n\n const {\n bottom: bottomRightY,\n left: topLeftX,\n right: bottomRightX,\n top: topLeftY,\n } = imageRef.current?.getBoundingClientRect();\n const { innerHeight: windowHeight, innerWidth: windowWidth } = window;\n\n if (\n topLeftX > windowWidth * (1 / 2) ||\n topLeftY > windowHeight * (1 / 2) ||\n bottomRightX < windowWidth * (1 / 2) ||\n bottomRightY < windowHeight * (1 / 2)\n )\n return true;\n\n return false;\n};\n\nexport default imageIsOutOfBounds;\n"
},
{
"path": "src/components/ImageStage/utils/index.ts",
"content": "import getTranslateOffsetsFromScale from './getTranslateOffsetsFromScale';\nimport imageIsOutOfBounds from './imageIsOutOfBounds';\nimport useDoubleClick from './useDoubleClick';\nimport useWindowSize from './useRefSize';\n\nexport {\n getTranslateOffsetsFromScale,\n imageIsOutOfBounds,\n useDoubleClick,\n useWindowSize,\n};\n"
},
{
"path": "src/components/ImageStage/utils/useDoubleClick.tsx",
"content": "import React, { useEffect } from 'react';\n\ntype IUseDoubleClickProps = {\n /** Set to false to disable onDoubleClick/onSingleClick */\n enabled?: boolean;\n /** The amount of time (in milliseconds) to wait before differentiating a single from a double click */\n latency?: number;\n /** A callback function for double click events */\n onDoubleClick?: (event: MouseEvent) => void;\n /** A callback function for single click events */\n onSingleClick?: (event: MouseEvent) => void;\n /** Dom node to watch for double clicks */\n ref: React.RefObject;\n};\n\n/**\n * React Hook that returns the current window size\n * and report updates from the 'resize' window event\n */\nconst useDoubleClick = ({\n enabled = true,\n latency = 300,\n onDoubleClick = () => null,\n onSingleClick = () => null,\n ref,\n}: IUseDoubleClickProps) => {\n useEffect(() => {\n const clickRef = ref.current;\n let clickCount = 0;\n let timer: ReturnType;\n\n const handleClick = (e: MouseEvent) => {\n if (enabled) {\n clickCount += 1;\n\n timer = setTimeout(() => {\n if (clickCount === 1) onSingleClick(e);\n else if (clickCount === 2) onDoubleClick(e);\n\n clickCount = 0;\n }, latency);\n }\n };\n\n // Add event listener for click events\n clickRef?.addEventListener('click', handleClick);\n\n // Remove event listener\n return () => {\n clickRef?.removeEventListener('click', handleClick);\n\n if (timer) {\n clearTimeout(timer);\n }\n };\n });\n};\n\nexport default useDoubleClick;\n"
},
{
"path": "src/components/ImageStage/utils/useRefSize.tsx",
"content": "import { useCallback, useEffect, useRef, useState } from 'react';\n\ntype RefSize = {\n height: number;\n width: number;\n};\n\ntype Node = HTMLDivElement | null;\n\ntype IUseRefSize = [refSize: RefSize, elementRef: (node: any) => void | null];\n\n/**\n * React Hook that returns the current ref size\n * and report updates from the 'resize' ref event\n *\n * @returns {RefSize} An object containing the ref width and height\n * @returns {elementRef} A callback ref to be used on the container being measured\n */\nconst useRefSize = (): IUseRefSize => {\n const ref = useRef(null);\n\n const [node, setNode] = useState(null);\n const [refSize, setRefSize] = useState({\n height: ref.current?.clientHeight || 0,\n width: ref.current?.clientWidth || 0,\n });\n\n const elementRef = useCallback((node: Node) => {\n if (node !== null) {\n setNode(node);\n\n setRefSize({\n height: node.clientHeight,\n width: node.clientWidth,\n });\n }\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (node) {\n const height = node.clientHeight;\n const width = node.clientWidth;\n if (height !== refSize.height || width !== refSize.width) {\n setRefSize({\n height,\n width,\n });\n }\n }\n };\n\n window.addEventListener('resize', handleResize);\n window.addEventListener('orientationchange', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('orientationchange', handleResize);\n };\n }, [node, refSize.height, refSize.width]);\n\n return [refSize, elementRef];\n};\n\nexport default useRefSize;\n"
},
{
"path": "src/components/PageContainer/index.tsx",
"content": "import React from 'react';\nimport { useTransition, animated, config } from '@react-spring/web';\nimport styled, { AnyStyledComponent } from 'styled-components';\n\ntype IPageContainerProps = {\n /** All child components of Lightbox */\n children: React.ReactNode[];\n /** Classes are applied to the root lightbox component */\n className: string;\n /** Flag that dictates if the lightbox is open or closed */\n isOpen: boolean;\n /** React-Spring useTransition config for page open/close animation */\n pageTransitionConfig: any;\n /** Inline styles are applied to the root lightbox component */\n style: React.CSSProperties;\n};\n\n/**\n * Animates the lightbox as it opens/closes\n */\nconst PageContainer = ({\n children,\n className,\n isOpen,\n pageTransitionConfig,\n style,\n}: IPageContainerProps) => {\n const defaultTransition = {\n config: { ...config.default, friction: 32, mass: 1, tension: 320 },\n enter: { opacity: 1, transform: 'scale(1)' },\n from: { opacity: 0, transform: 'scale(0.75)' },\n leave: { opacity: 0, transform: 'scale(0.75)' },\n };\n\n const transitions = useTransition(isOpen, {\n ...defaultTransition,\n ...pageTransitionConfig,\n });\n\n return (\n <>\n {transitions(\n (animatedStyles, item) =>\n item && (\n \n {children}\n \n ),\n )}\n \n );\n};\n\nexport default PageContainer;\n\nconst AnimatedPageContainer = styled(animated.div as AnyStyledComponent)`\n display: flex;\n flex-direction: column;\n position: fixed;\n z-index: 400;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n`;\n"
},
{
"path": "src/components/index.tsx",
"content": "import ImageStage from './ImageStage';\nimport PageContainer from './PageContainer';\nimport CreatePortal from './CreatePortal';\n\nexport { ImageStage, PageContainer, CreatePortal };\n"
},
{
"path": "src/index.tsx",
"content": "import React, { useEffect } from 'react';\nimport { ImageStage, PageContainer, CreatePortal } from './components';\nimport type { ImagesList } from './types/ImagesList';\n\nexport type ImagesListType = ImagesList;\n\ntype ILightboxProps = {\n /** classnames are applied to the root lightbox component */\n className?: string;\n /** Index of image in images array that is currently shown */\n currentIndex: number;\n /** Array of images to be shown in Lightbox, each image object may contain any valid 'img' attribute with the exceptions of 'draggable', 'onClick', 'onDragStart' and 'ref' */\n images: ImagesList;\n /** Determines whether the Lightbox returns just an Inline carousel (ImageStage) */\n inline?: boolean;\n /** Flag that dictates if the lightbox is open or closed */\n isOpen: boolean;\n /** Function that closes the Lightbox */\n onClose?: () => void;\n /** Function that changes currentIndex to next image in images */\n onNext: () => void;\n /** Function that changes currentIndex to previous image in images */\n onPrev: () => void;\n /** React-Spring useTransition config for page open/close animation */\n pageTransitionConfig?: any;\n /** A React component that renders below the image pager */\n renderFooter?: () => React.ReactNode;\n /** A React component that renders above the image pager */\n renderHeader?: () => React.ReactNode;\n /** A React component that renders inside the image stage, useful for making overlays over the image */\n renderImageOverlay?: () => React.ReactNode;\n /** A React component that is used for next button in image pager */\n renderNextButton?: ({ canNext }: { canNext: boolean }) => React.ReactNode;\n /** A React component that is used for previous button in image pager */\n renderPrevButton?: ({ canPrev }: { canPrev: boolean }) => React.ReactNode;\n /** Overrides the default behavior of double clicking causing an image zoom to a single click */\n singleClickToZoom?: boolean;\n /** Inline styles that are applied to the root lightbox component */\n style?: React.CSSProperties;\n};\n\n/**\n * Gesture controlled lightbox that interpolates animations with spring physics.\n *\n * Demos and docs:\n * @see https://timellenberger.com/libraries/react-spring-lightbox\n *\n * GitHub repo:\n * @see https://github.com/tim-soft/react-spring-lightbox\n *\n * Built with:\n * @see https://github.com/react-spring/react-use-gesture\n * @see https://github.com/react-spring/react-spring\n * @see https://github.com/styled-components/styled-components\n */\nconst Lightbox = ({\n className = '',\n currentIndex,\n images = [],\n inline = false,\n isOpen,\n onClose,\n onNext,\n onPrev,\n pageTransitionConfig = null,\n renderFooter = () => null,\n renderHeader = () => null,\n renderImageOverlay = () => null,\n renderNextButton = () => null,\n renderPrevButton = () => null,\n singleClickToZoom = false,\n style = {},\n}: ILightboxProps) => {\n // Handle event listeners for keyboard\n useEffect(() => {\n /**\n * Prevent keyboard from controlling background page\n * when lightbox is open\n */\n const preventBackgroundScroll = (e: KeyboardEvent) => {\n const keysToIgnore = [\n 'ArrowUp',\n 'ArrowDown',\n 'End',\n 'Home',\n 'PageUp',\n 'PageDown',\n ];\n\n if (isOpen && keysToIgnore.includes(e.key)) e.preventDefault();\n };\n\n /**\n * Navigate images with arrow keys, close on Esc key\n */\n const handleKeyboardInput = (e: KeyboardEvent) => {\n if (isOpen) {\n switch (e.key) {\n case 'ArrowLeft':\n onPrev();\n break;\n case 'ArrowRight':\n onNext();\n break;\n case 'Escape':\n onClose && onClose();\n break;\n default:\n e.preventDefault();\n break;\n }\n }\n };\n\n document.addEventListener('keyup', handleKeyboardInput);\n document.addEventListener('keydown', preventBackgroundScroll);\n\n return () => {\n document.removeEventListener('keyup', handleKeyboardInput);\n document.removeEventListener('keydown', preventBackgroundScroll);\n };\n });\n\n const imageStage = (\n \n \n {renderHeader()}\n {imageStage}\n {renderFooter()}\n \n \n );\n};\n\nexport default Lightbox;\n"
},
{
"path": "src/types/ImagesList.ts",
"content": "export type ImagesListItem = Omit<\n React.HTMLProps,\n 'draggable' | 'onClick' | 'onDragStart' | 'ref'\n> & { alt: string; loading?: 'auto' | 'eager' | 'lazy'; src: string };\n\nexport type ImagesList = ImagesListItem[];\n"
},
{
"path": "tsconfig.buildtypes.json",
"content": "/* eslint-disable sort-keys */\n{\n \"extends\": \"./tsconfig.json\",\n \"include\": [\"src/index.tsx\"],\n \"exclude\": [\"node_modules\", \"dist\", \"example\", \"src/__tests__\"]\n}\n"
},
{
"path": "tsconfig.json",
"content": "/* eslint-disable sort-keys */\n{\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"module\": \"esnext\",\n \"lib\": [\"dom\", \"esnext\"],\n \"moduleResolution\": \"node\",\n \"jsx\": \"react\",\n \"sourceMap\": true,\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"noImplicitReturns\": true,\n \"noImplicitThis\": true,\n \"noImplicitAny\": true,\n \"strictNullChecks\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"allowSyntheticDefaultImports\": true,\n \"rootDir\": \"src\",\n \"target\": \"ES5\",\n \"isolatedModules\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"],\n \"exclude\": [\"node_modules\", \"dist\", \"example\", \"src/__tests__\"],\n \"types\": [\"node\", \"jest\", \"@testing-library/jest-dom\"]\n}\n"
}
] ![](\"https://thumbs.gfycat.com/CrispGeneralEquestrian-size_restricted.gif\")
\n \n