{"id":26489555,"url":"https://github.com/tim-soft/react-spring-lightbox","last_synced_at":"2025-04-04T11:12:08.895Z","repository":{"id":35042734,"uuid":"177674247","full_name":"tim-soft/react-spring-lightbox","owner":"tim-soft","description":"📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.","archived":false,"fork":false,"pushed_at":"2023-12-01T05:50:42.000Z","size":2351,"stargazers_count":243,"open_issues_count":19,"forks_count":27,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T10:05:55.014Z","etag":null,"topics":["gestures","images","lightbox","react","react-spring","touch"],"latest_commit_sha":null,"homepage":"https://timellenberger.com/libraries/react-spring-lightbox","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tim-soft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-25T22:28:59.000Z","updated_at":"2025-01-20T22:25:56.000Z","dependencies_parsed_at":"2024-06-18T15:28:45.949Z","dependency_job_id":"d729a0b2-4bfd-4893-a0c0-9a1487ff8fab","html_url":"https://github.com/tim-soft/react-spring-lightbox","commit_stats":{"total_commits":167,"total_committers":4,"mean_commits":41.75,"dds":0.3652694610778443,"last_synced_commit":"29a3c3292c8f2a674d6bd2a2879b1451516b9578"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-spring-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-spring-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-spring-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-spring-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tim-soft","download_url":"https://codeload.github.com/tim-soft/react-spring-lightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247166168,"owners_count":20894654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gestures","images","lightbox","react","react-spring","touch"],"created_at":"2025-03-20T07:41:49.389Z","updated_at":"2025-04-04T11:12:08.877Z","avatar_url":"https://github.com/tim-soft.png","language":"TypeScript","readme":"# react-spring-lightbox\n\n[![npm](https://img.shields.io/npm/v/react-spring-lightbox.svg?color=brightgreen\u0026style=popout-square)](https://www.npmjs.com/package/react-spring-lightbox)\n[![NPM](https://img.shields.io/npm/l/react-spring-lightbox.svg?color=brightgreen\u0026style=popout-square)](https://github.com/tim-soft/react-spring-lightbox/blob/master/LICENSE)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-spring-lightbox.svg?style=popout-square)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=popout-square)\n[![Travis (.org)](https://img.shields.io/travis/tim-soft/react-spring-lightbox?style=flat-square)](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\u003cp align=\"middle\"\u003e\n  \u003ca href=\"https://71hts.csb.app/\"\u003e\n    \u003cimg src=\"https://thumbs.gfycat.com/CrispGeneralEquestrian-size_restricted.gif\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://timellenberger.com/libraries/react-spring-lightbox\"\u003eDocs\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://codesandbox.io/s/react-spring-lightbox-mosaic-71hts?fontsize=14\u0026module=%2Fsrc%2FImageGallery%2Findex.js\"\u003eCodesandbox\u003c/a\u003e\n\u003c/p\u003e\n\n## ✨ Features\n\n-   :point_up: \u0026nbsp;\u0026nbsp;\u0026nbsp;`Mousewheel`, swipe or click+drag to page photos\n-   :keyboard: \u0026nbsp;Keyboard controls \u003ckbd\u003e\u0026leftarrow;\u003c/kbd\u003e \u003ckbd\u003e\u0026rightarrow;\u003c/kbd\u003e \u003ckbd\u003eEsc\u003c/kbd\u003e\n-   :mouse2: \u0026nbsp;\u003ckbd\u003eCtrl\u003c/kbd\u003e + `Mousewheel` or `Trackpad Pinch` to zoom\n-   :mag_right: \u0026nbsp;Double/Single-tap or double/single-click to zoom in/out\n-   :ok_hand: \u0026nbsp;\u0026nbsp;\u0026nbsp;Pinch to zoom\n-   :point_left: \u0026nbsp;Panning on zoomed-in images\n-   :checkered_flag: \u0026nbsp;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 `\u003cimg /\u003e` attribute including `loading` (lazy loading), `srcset` and `aria-*`\n\n## Install\n\n```bash\nyarn add react-spring-lightbox\n```\n\n## Usage\n\nThe `images` prop now accepts a list of objects whose properties can be _almost_ any valid React `\u003cimg /\u003e` prop including `srcset`, `loading` (lazy loading) and `aria-*` attributes.\n\nIf you use typescript, the exact type can be imported from `import { ImagesListType } from 'react-spring-lightbox';`\n\n```typescript\nimport React, { useState } from 'react';\nimport Lightbox, { ImagesListType } from 'react-spring-lightbox';\n\nconst images: ImagesListType = [\n    {\n        src: 'https://timellenberger.com/static/blog-content/dark-mode/win10-dark-mode.jpg',\n        loading: 'lazy',\n        alt: 'Windows 10 Dark Mode Setting',\n    },\n    {\n        src: 'https://timellenberger.com/static/blog-content/dark-mode/macos-dark-mode.png',\n        loading: 'lazy',\n        alt: 'macOS Mojave Dark Mode Setting',\n    },\n    {\n        src: 'https://timellenberger.com/static/blog-content/dark-mode/android-9-dark-mode.jpg',\n        loading: 'lazy',\n        alt: 'Android 9.0 Dark Mode Setting',\n    },\n];\n\nconst CoolLightbox = () =\u003e {\n    const [currentImageIndex, setCurrentIndex] = useState(0);\n\n    const gotoPrevious = () =\u003e\n        currentImageIndex \u003e 0 \u0026\u0026 setCurrentIndex(currentImageIndex - 1);\n\n    const gotoNext = () =\u003e\n        currentImageIndex + 1 \u003c images.length \u0026\u0026\n        setCurrentIndex(currentImageIndex + 1);\n\n    return (\n        \u003cLightbox\n            isOpen={true}\n            onPrev={gotoPrevious}\n            onNext={gotoNext}\n            images={images}\n            currentIndex={currentImageIndex}\n            /* Add your own UI */\n            // renderHeader={() =\u003e (\u003cCustomHeader /\u003e)}\n            // renderFooter={() =\u003e (\u003cCustomFooter /\u003e)}\n            // renderPrevButton={() =\u003e (\u003cCustomLeftArrowButton /\u003e)}\n            // renderNextButton={() =\u003e (\u003cCustomRightArrowButton /\u003e)}\n            // renderImageOverlay={() =\u003e (\u003cImageOverlayComponent \u003e)}\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        /\u003e\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-soft%2Freact-spring-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftim-soft%2Freact-spring-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-soft%2Freact-spring-lightbox/lists"}