{"id":13461366,"url":"https://github.com/frontend-collective/react-image-lightbox","last_synced_at":"2025-03-24T22:34:35.035Z","repository":{"id":37887147,"uuid":"51432549","full_name":"frontend-collective/react-image-lightbox","owner":"frontend-collective","description":"React lightbox component","archived":true,"fork":false,"pushed_at":"2023-01-19T15:09:28.000Z","size":4853,"stargazers_count":1286,"open_issues_count":0,"forks_count":358,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-16T19:50:44.242Z","etag":null,"topics":["component","image","lightbox","react"],"latest_commit_sha":null,"homepage":"https://frontend-collective.github.io/react-image-lightbox/","language":"JavaScript","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/frontend-collective.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-10T09:49:48.000Z","updated_at":"2025-03-07T02:36:58.000Z","dependencies_parsed_at":"2023-02-11T06:00:31.801Z","dependency_job_id":null,"html_url":"https://github.com/frontend-collective/react-image-lightbox","commit_stats":null,"previous_names":["fritz-c/react-image-lightbox"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-image-lightbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-image-lightbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-image-lightbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontend-collective%2Freact-image-lightbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontend-collective","download_url":"https://codeload.github.com/frontend-collective/react-image-lightbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245298482,"owners_count":20592623,"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":["component","image","lightbox","react"],"created_at":"2024-07-31T11:00:36.051Z","updated_at":"2025-03-24T22:34:34.741Z","avatar_url":"https://github.com/frontend-collective.png","language":"JavaScript","funding_links":[],"categories":["UI Components","JavaScript","Table of Contents"],"sub_categories":["Photo / Image","Image Libraries"],"readme":"\u003e **NOTE**: This package is not maintained any more and will be archived.\n\u003e\n\u003e [react-photoswipe-gallery](https://www.npmjs.com/package/react-photoswipe-gallery) is a better-maintained and more feature-rich alternative (as of January 2023).\n\n# React Image Lightbox\n\n[![NPM](https://nodei.co/npm/react-image-lightbox.png)](https://npmjs.org/package/react-image-lightbox)\n[![Build Status](https://github.com/frontend-collective/react-image-lightbox/actions/workflows/ci.yml/badge.svg)](https://github.com/frontend-collective/react-image-lightbox/actions?query=workflow%3ACI)\n[![Coverage Status](https://coveralls.io/repos/github/frontend-collective/react-image-lightbox/badge.svg?branch=master)](https://coveralls.io/github/frontend-collective/react-image-lightbox?branch=master)\n\n[![RIL Snapshot](https://user-images.githubusercontent.com/4413963/31209033-78f60df0-a9c3-11e7-8f83-69998d46973e.png)](https://frontend-collective.github.io/react-image-lightbox/)\n\nA flexible lightbox component for displaying images in a React project.\n\n[DEMO](https://frontend-collective.github.io/react-image-lightbox/)\n\nFeatures\n\n- Keyboard shortcuts (with rate limiting)\n- Image Zoom\n- Flexible rendering using src values assigned on the fly\n- Image preloading for smoother viewing\n- Mobile friendly, with pinch to zoom and swipe (Thanks, [@webcarrot](https://github.com/webcarrot)!)\n\n## Example\n\n```jsx\nimport React, { Component } from 'react';\nimport Lightbox from 'react-image-lightbox';\nimport 'react-image-lightbox/style.css'; // This only needs to be imported once in your app\n\nconst images = [\n '//placekitten.com/1500/500',\n '//placekitten.com/4000/3000',\n '//placekitten.com/800/1200',\n '//placekitten.com/1500/1500',\n];\n\nexport default class LightboxExample extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n photoIndex: 0,\n isOpen: false,\n };\n }\n\n render() {\n const { photoIndex, isOpen } = this.state;\n\n return (\n \u003cdiv\u003e\n \u003cbutton type=\"button\" onClick={() =\u003e this.setState({ isOpen: true })}\u003e\n Open Lightbox\n \u003c/button\u003e\n\n {isOpen \u0026\u0026 (\n \u003cLightbox\n mainSrc={images[photoIndex]}\n nextSrc={images[(photoIndex + 1) % images.length]}\n prevSrc={images[(photoIndex + images.length - 1) % images.length]}\n onCloseRequest={() =\u003e this.setState({ isOpen: false })}\n onMovePrevRequest={() =\u003e\n this.setState({\n photoIndex: (photoIndex + images.length - 1) % images.length,\n })\n }\n onMoveNextRequest={() =\u003e\n this.setState({\n photoIndex: (photoIndex + 1) % images.length,\n })\n }\n /\u003e\n )}\n \u003c/div\u003e\n );\n }\n}\n```\n\nPlay with the code on the [example on CodeSandbox](https://codesandbox.io/s/l9n3vnz8yz)\n\n## Options\n\n| Property | Type | Description |\n| :------------------------------ | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| mainSrc\u003cbr/\u003e_(required)_ | string | Main display image url |\n| prevSrc | string | Previous display image url (displayed to the left). If left undefined, `onMovePrevRequest` will not be called, and the button not displayed |\n| nextSrc | string | Next display image url (displayed to the right). If left undefined, `onMoveNextRequest` will not be called, and the button not displayed |\n| mainSrcThumbnail | string | Thumbnail image url corresponding to `props.mainSrc`. Displayed as a placeholder while the full-sized image loads. |\n| prevSrcThumbnail | string | Thumbnail image url corresponding to `props.prevSrc`. Displayed as a placeholder while the full-sized image loads. |\n| nextSrcThumbnail | string | Thumbnail image url corresponding to `props.nextSrc`. Displayed as a placeholder while the full-sized image loads. |\n| onCloseRequest\u003cbr/\u003e_(required)_ | func | Close window event. Should change the parent state such that the lightbox is not rendered |\n| onMovePrevRequest | func | Move to previous image event. Should change the parent state such that `props.prevSrc` becomes `props.mainSrc`, `props.mainSrc` becomes `props.nextSrc`, etc. |\n| onMoveNextRequest | func | Move to next image event. Should change the parent state such that `props.nextSrc` becomes `props.mainSrc`, `props.mainSrc` becomes `props.prevSrc`, etc. |\n| onImageLoad | func | Called when an image loads.\u003cdiv\u003e`(imageSrc: string, srcType: string, image: object): void`\u003c/div\u003e |\n| onImageLoadError | func | Called when an image fails to load.\u003cdiv\u003e`(imageSrc: string, srcType: string, errorEvent: object): void`\u003c/div\u003e |\n| imageLoadErrorMessage | node | What is rendered in place of an image if it fails to load. Centered in the lightbox viewport. Defaults to the string `\"This image failed to load\"`. |\n| onAfterOpen | func | Called after the modal has rendered. |\n| discourageDownloads | bool | When `true`, enables download discouragement (preventing [right-click -\u003e Save Image As...]). Defaults to `false`. |\n| animationDisabled | bool | When `true`, image sliding animations are disabled. Defaults to `false`. |\n| animationOnKeyInput | bool | When `true`, sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to `false`. |\n| animationDuration | number | Animation duration (ms). Defaults to `300`. |\n| keyRepeatLimit | number | Required interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to `180`. |\n| keyRepeatKeyupBonus | number | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images). Defaults to `40`. |\n| imageTitle | node | Image title (Descriptive element above image) |\n| imageCaption | node | Image caption (Descriptive element below image) |\n| imageCrossOrigin | string | `crossorigin` attribute to append to `img` elements ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin)) |\n| toolbarButtons | node[] | Array of custom toolbar buttons |\n| reactModalStyle | Object | Set `z-index` style, etc., for the parent react-modal ([react-modal style format](https://github.com/reactjs/react-modal#styles)) |\n| reactModalProps | Object | Override props set on react-modal (https://github.com/reactjs/react-modal) |\n| imagePadding | number | Padding (px) between the edge of the window and the lightbox. Defaults to `10`. |\n| clickOutsideToClose | bool | When `true`, clicks outside of the image close the lightbox. Defaults to `true`. |\n| enableZoom | bool | Set to `false` to disable zoom functionality and hide zoom buttons. Defaults to `true`. |\n| wrapperClassName | string | Class name which will be applied to root element after React Modal |\n| nextLabel | string | `aria-label` and `title` set on the 'Next' button. Defaults to `'Next image'`. |\n| prevLabel | string | `aria-label` and `title` set on the 'Previous' button. Defaults to `'Previous image'`. |\n| zoomInLabel | string | `aria-label` and `title` set on the 'Zoom In' button. Defaults to `'Zoom in'`. |\n| zoomOutLabel | string | `aria-label` and `title` set on the 'Zoom Out' button. Defaults to `'Zoom out'`. |\n| closeLabel | string | `aria-label` and `title` set on the 'Close Lightbox' button. Defaults to `'Close lightbox'`. |\n| loader | node | Custom Loading indicator for loading |\n\n## Browser Compatibility\n\n| Browser | Works? |\n| :------ | :----- |\n| Chrome | Yes |\n| Firefox | Yes |\n| Safari | Yes |\n| IE 11 | Yes |\n\n## Contributing\n\nAfter cloning the repository and running `npm install` inside, you can use the following commands to develop and build the project.\n\n```sh\n# Starts a webpack dev server that hosts a demo page with the lightbox.\n# It uses react-hot-loader so changes are reflected on save.\nnpm start\n\n# Lints the code with eslint and my custom rules.\nyarn run lint\n\n# Lints and builds the code, placing the result in the dist directory.\n# This build is necessary to reflect changes if you're\n# `npm link`-ed to this repository from another local project.\nyarn run build\n```\n\nPull requests are welcome!\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-collective%2Freact-image-lightbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontend-collective%2Freact-image-lightbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontend-collective%2Freact-image-lightbox/lists"}