{"id":21169784,"url":"https://github.com/treyhuffine/lightbox-react","last_synced_at":"2025-07-20T15:02:16.955Z","repository":{"id":20991661,"uuid":"91392752","full_name":"treyhuffine/lightbox-react","owner":"treyhuffine","description":"Lightbox for components or images built for React","archived":false,"fork":false,"pushed_at":"2022-12-10T17:07:31.000Z","size":2488,"stargazers_count":63,"open_issues_count":21,"forks_count":32,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-17T06:12:52.698Z","etag":null,"topics":["lightbox","react","react-components"],"latest_commit_sha":null,"homepage":"https://skilled.dev","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/treyhuffine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-15T23:15:13.000Z","updated_at":"2022-12-22T02:15:30.000Z","dependencies_parsed_at":"2023-01-13T21:15:05.459Z","dependency_job_id":null,"html_url":"https://github.com/treyhuffine/lightbox-react","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/treyhuffine/lightbox-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Flightbox-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Flightbox-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Flightbox-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Flightbox-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/treyhuffine","download_url":"https://codeload.github.com/treyhuffine/lightbox-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Flightbox-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266061791,"owners_count":23870663,"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":["lightbox","react","react-components"],"created_at":"2024-11-20T15:53:43.033Z","updated_at":"2025-07-20T15:02:16.844Z","avatar_url":"https://github.com/treyhuffine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Component \u0026 Image Lightbox\n\n[![NPM](https://nodei.co/npm/lightbox-react.png)](https://npmjs.org/package/lightbox-react)\n\n### See it in action on [Skilled.dev - Coding Interview Course](https://skilled.dev?ref=lightbox-react) and [gitconnected - The Developer Community](https://gitconnected.com?ref=lightbox-react)\n\nA lightbox for React components or images. String passed as arguments are\nassumed to be the src for an image. Otherwise, it will check if the argument\nis able to be rended as a child React component of the lightbox.\n\n[DEMO](http://treyhuffine.com/lightbox-react/)\n\nOriginally forked from [fritz-c](https://github.com/fritz-c/react-image-lightbox)'s library\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- No external CSS\n\n## Example\n\n```jsx\nimport React, { Component } from 'react';\nimport Lightbox from 'lightbox-react';\nimport 'lightbox-react/style.css'; // This only needs to be imported once in your app\n\nimport VideoIframe from 'components/video';\n\nconst images = [\n  VideoIframe,\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\n## Deprecation Notice\n\nAll unprefixed classes (listed below) will be removed in v4.0.0\\. Use their `ril-` prefixed alternatives instead. `close`, `closing`, `download-blocker`, `image-current`, `image-next`, `image-prev`, `inner`, `next-button`, `not-loaded`, `outer`, `prev-button`, `toolbar`, `toolbar-left`, `toolbar-right`, `zoom-in`, `zoom-out`\n\n## Options\n\n| Property            | Type   | Default        | Required | Description                                                                                                                                                   |\n| :------------------ | :----: | :------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| mainSrc             | string |                | yes      | Main display image url or React component                                                                                                                     |\n| prevSrc             | string |                |          | Previous display image url or component (displayed to the left). If left undefined, `onMovePrevRequest` will not be called, and the button not displayed      |\n| nextSrc             | string |                |          | Next display image url or component (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      | func   |                | yes      | Close window event. Should change the parent state such that the lightbox is not rendered                                                                     |\n| onMovePrevRequest   | func   | empty function |          | 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   | empty function |          | Move to next image event. Should change the parent state such that `props.nextSrc` becomes `props.mainSrc`, `props.mainSrc` becomes `props.prevSrc`, etc.     |\n| onImageLoadError    | func   | empty function |          | Called when an image fails to load.\u003cdiv\u003e`\u003ccode\u003e(imageSrc: string, srcType: string, errorEvent: object): void\u003c/code\u003e`\u003c/div\u003e                                    |\n| discourageDownloads | bool   | `false`        |          | Enable download discouragement (prevents [right-click -\u003e Save Image As...])                                                                                   |\n| animationDisabled   | bool   | `false`        |          | Disable all animation                                                                                                                                         |\n| animationOnKeyInput | bool   | `false`        |          | Disable animation on actions performed with keyboard shortcuts                                                                                                |\n| animationDuration   | number | `300`          |          | Animation duration (ms)                                                                                                                                       |\n| keyRepeatLimit      | number | `180`          |          | Required interval of time (ms) between key actions (prevents excessively fast navigation of images)                                                           |\n| keyRepeatKeyupBonus | number | `40`           |          | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)                          |\n| imageTitle          | node   |                |          | Image title (Descriptive element above image)                                                                                                                 |\n| imageCaption        | node   |                |          | Image caption (Descriptive element below image)                                                                                                               |\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| imagePadding        | number | `10`           |          | Padding (px) between the edge of the window and the lightbox                                                                                                  |\n| clickOutsideToClose | bool   | `true`         |          | When true, clicks outside of the image close the lightbox                                                                                                     |\n| enableZoom          | bool   | `true`         |          | Set to false to disable zoom functionality and hide zoom buttons                                                                                              |\n\n## Browser Compatibility\n\n| Browser  | Works?                              |\n| :------- | :---------------------------------- |\n| Chrome   | Yes                                 |\n| Firefox  | Yes                                 |\n| Safari   | Yes                                 |\n| IE \u003e= 10 | Yes                                 |\n| IE 9     | Everything works, but no animations |\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.\nnpm 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.\nnpm 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%2Ftreyhuffine%2Flightbox-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftreyhuffine%2Flightbox-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreyhuffine%2Flightbox-react/lists"}