├── .babelrc ├── .eslintignore ├── .eslintrc.json ├── .github ├── dependabot.yml └── workflows │ └── ci.yml ├── .gitignore ├── .husky └── pre-commit ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── __mocks__ └── fileMock.js ├── examples ├── cats │ ├── app.js │ ├── images │ │ ├── 1.jpg │ │ ├── 1_thumb.jpg │ │ ├── 2.jpg │ │ ├── 2_thumb.jpg │ │ ├── 3.jpg │ │ ├── 3_thumb.jpg │ │ ├── 4.jpg │ │ └── 4_thumb.jpg │ ├── index.html │ ├── index.js │ └── stylesheets │ │ ├── app.css │ │ └── vendor │ │ ├── github-light.css │ │ └── stylesheet.css └── shared │ └── favicon │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── safari-pinned-tab.svg ├── index.d.ts ├── jest.config.js ├── package.json ├── rollup.config.js ├── src ├── __tests__ │ ├── __snapshots__ │ │ └── react-image-lightbox.spec.js.snap │ └── react-image-lightbox.spec.js ├── constant.js ├── index.js ├── react-image-lightbox.js ├── style.css └── util.js ├── svg ├── left_arrow.svg ├── right_arrow.svg ├── x.svg ├── zoom_in.svg └── zoom_out.svg ├── test-config ├── shim.js └── test-setup.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "browsers": ["last 2 versions", "ie >= 9"] 8 | } 9 | } 10 | ], 11 | "@babel/preset-react" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | dist 4 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier", "prettier/react"], 3 | "env": { 4 | "jest": true 5 | }, 6 | "rules": { 7 | "jsx-a11y/control-has-associated-label": 0, 8 | "react/destructuring-assignment": 0, 9 | "react/jsx-filename-extension": 0, 10 | "react/jsx-props-no-spreading": 0, 11 | "react/prop-types": 0, 12 | "react/sort-comp": 0 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: daily 7 | open-pull-requests-limit: 10 8 | ignore: 9 | - dependency-name: "@babel/core" 10 | versions: 11 | - 7.12.10 12 | - 7.12.13 13 | - 7.12.16 14 | - 7.12.17 15 | - 7.13.1 16 | - 7.13.10 17 | - 7.13.13 18 | - 7.13.14 19 | - 7.13.15 20 | - 7.13.8 21 | - dependency-name: y18n 22 | versions: 23 | - 4.0.1 24 | - 4.0.2 25 | - dependency-name: "@babel/preset-env" 26 | versions: 27 | - 7.12.11 28 | - 7.12.13 29 | - 7.12.16 30 | - 7.12.17 31 | - 7.13.0 32 | - 7.13.10 33 | - 7.13.12 34 | - 7.13.5 35 | - 7.13.8 36 | - 7.13.9 37 | - dependency-name: husky 38 | versions: 39 | - 4.3.8 40 | - 5.0.9 41 | - 5.1.0 42 | - 5.1.1 43 | - 5.1.2 44 | - 5.1.3 45 | - 5.2.0 46 | - dependency-name: react-modal 47 | versions: 48 | - 3.12.1 49 | - dependency-name: lodash 50 | versions: 51 | - 4.17.20 52 | - dependency-name: elliptic 53 | versions: 54 | - 6.5.3 55 | - dependency-name: handlebars 56 | versions: 57 | - 4.7.6 58 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout 14 | uses: actions/checkout@v2 15 | 16 | - name: Setup NodeJS 17 | uses: actions/setup-node@v2 18 | 19 | - name: Install deps 20 | run: yarn 21 | 22 | - name: Run tests 23 | run: npm test -- --coverage 24 | 25 | - name: Coveralls 26 | uses: coverallsapp/github-action@master 27 | with: 28 | github-token: ${{ secrets.GITHUB_TOKEN }} 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | npm-debug.log 4 | 5 | # Editor and other tmp files 6 | *.swp 7 | *.un~ 8 | *.iml 9 | *.ipr 10 | *.iws 11 | *.sublime-* 12 | .idea/ 13 | *.DS_Store 14 | 15 | # Build directories (Will be preserved by npm) 16 | dist 17 | build 18 | /style.css 19 | /style.css.map 20 | .cache -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn pretty-quick --staged 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | bower.json 2 | src/examples 3 | svg 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | CHANGELOG.md 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5" 4 | } 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [5.1.4](https://github.com/frontend-collective/react-image-lightbox/compare/v5.1.3...v5.1.4) (2021-07-13) 6 | 7 | ### [5.1.3](https://github.com/frontend-collective/react-image-lightbox/compare/v5.1.2...v5.1.3) (2021-07-13) 8 | 9 | ### [5.1.2](https://github.com/frontend-collective/react-image-lightbox/compare/v5.1.1...v5.1.2) (2021-07-13) 10 | 11 | 12 | ### Bug Fixes 13 | 14 | * fix cross origin iframe detection ([6683a29](https://github.com/frontend-collective/react-image-lightbox/commit/6683a29639f0df2609849d9c71f7da0fa08a4882)) 15 | 16 | ### [5.1.1](https://github.com/frontend-collective/react-image-lightbox/compare/v5.1.0...v5.1.1) (2019-11-12) 17 | 18 | 19 | ### Bug Fixes 20 | 21 | * allow React.ReactNode as imageTitle and imageCaption in TypeScript projects ([#158](https://github.com/frontend-collective/react-image-lightbox/issues/158)) ([f1858a3](https://github.com/frontend-collective/react-image-lightbox/commit/f1858a3efe25b66b850565b308688669bd7bab66)) 22 | * demo parcel site on github pages ([822140e](https://github.com/frontend-collective/react-image-lightbox/commit/822140ed665f55f664c1a5ea851f6b3aeaed31db)) 23 | * don't prevent default inside a passive listener ([b2b6a79](https://github.com/frontend-collective/react-image-lightbox/commit/b2b6a798671de7027635123baec8584e3fefaaf2)) 24 | * fix getOrigin issue within iFrames ([#175](https://github.com/frontend-collective/react-image-lightbox/issues/175)) ([f290cb3](https://github.com/frontend-collective/react-image-lightbox/commit/f290cb344ac89f6359b39c0fd4ab8fe00bb36205)), closes [#136](https://github.com/frontend-collective/react-image-lightbox/issues/136) 25 | * fix lint ([c2acf2c](https://github.com/frontend-collective/react-image-lightbox/commit/c2acf2ccd86610ad89f3af497e4eefc911da68ac)) 26 | 27 | 28 | 29 | # [5.1.0](https://github.com/frontend-collective/react-image-lightbox/compare/v5.0.0...v5.1.0) (2018-12-10) 30 | 31 | ### Bug Fixes 32 | 33 | - change focus when zoom buttons becomes disabled to be able to still use arrow keys (fix issue [#132](https://github.com/frontend-collective/react-image-lightbox/issues/132)) ([#135](https://github.com/frontend-collective/react-image-lightbox/issues/135)) ([30ba946](https://github.com/frontend-collective/react-image-lightbox/commit/30ba946)) 34 | 35 | ### Features 36 | 37 | - typescript declarations files ([#116](https://github.com/frontend-collective/react-image-lightbox/issues/116)) ([357a801](https://github.com/frontend-collective/react-image-lightbox/commit/357a801)) 38 | 39 | 40 | 41 | # [5.0.0](https://github.com/frontend-collective/react-image-lightbox/compare/v4.6.0...v5.0.0) (2018-04-29) 42 | 43 | ### Features 44 | 45 | - migrated away from style-loader ([e74b7c9](https://github.com/frontend-collective/react-image-lightbox/commit/e74b7c9)) 46 | 47 | ### BREAKING CHANGES 48 | 49 | - you must import the css for the component yourself, 50 | using `import 'react-image-lightbox/style.css';`. You only need to do this 51 | once in your application. 52 | - Versions of IE earlier than IE 11 are no longer supported. 53 | 54 | 55 | 56 | # [4.6.0](https://github.com/frontend-collective/react-image-lightbox/compare/v4.5.0...v4.6.0) (2018-03-09) 57 | 58 | ### Bug Fixes 59 | 60 | - avoid cross-origin errors from using window.top ([5bb5ac9](https://github.com/frontend-collective/react-image-lightbox/commit/5bb5ac9)) 61 | 62 | ### Features 63 | 64 | - onImageLoad API ([b08be00](https://github.com/frontend-collective/react-image-lightbox/commit/b08be00)) 65 | 66 | 67 | 68 | # [4.5.0](https://github.com/frontend-collective/react-image-lightbox/compare/v4.4.1...v4.5.0) (2018-01-21) 69 | 70 | ### Features 71 | 72 | - Custom error message prop for when images fail to load ([419998d](https://github.com/frontend-collective/react-image-lightbox/commit/419998d)), closes [#82](https://github.com/frontend-collective/react-image-lightbox/issues/82) 73 | 74 | 75 | 76 | ## [4.4.1](https://github.com/frontend-collective/react-image-lightbox/compare/v4.4.0...v4.4.1) (2018-01-14) 77 | 78 | ### Bug Fixes 79 | 80 | - handle environment with no navigator. Fixes [#97](https://github.com/frontend-collective/react-image-lightbox/issues/97) ([7f36b72](https://github.com/frontend-collective/react-image-lightbox/commit/7f36b72)) 81 | 82 | 83 | 84 | # [4.4.0](https://github.com/frontend-collective/react-image-lightbox/compare/v4.3.0...v4.4.0) (2017-12-17) 85 | 86 | ### Bug Fixes 87 | 88 | - silence react-modal warning by setting appElement ([a26d597](https://github.com/frontend-collective/react-image-lightbox/commit/a26d597)) 89 | 90 | ### Features 91 | 92 | - allow for override of react-modal props ([45a756d](https://github.com/frontend-collective/react-image-lightbox/commit/45a756d)) 93 | 94 | 95 | 96 | # [4.3.0](https://github.com/frontend-collective/react-image-lightbox/compare/v4.2.2...v4.3.0) (2017-10-13) 97 | 98 | ### Bug Fixes 99 | 100 | - Hide orange outline around viewer in Chrome on Android ([359e9bd](https://github.com/frontend-collective/react-image-lightbox/commit/359e9bd)) 101 | 102 | ### Features 103 | 104 | - Add react@16 support ([e3e63b6](https://github.com/frontend-collective/react-image-lightbox/commit/e3e63b6)) 105 | 106 | 107 | 108 | ## [4.2.2](https://github.com/frontend-collective/react-image-lightbox/compare/v4.2.1...v4.2.2) (2017-10-05) 109 | 110 | ### Bug Fixes 111 | 112 | - Improve rendering on zoom in Safari ([bab9ca1](https://github.com/frontend-collective/react-image-lightbox/commit/bab9ca1)) 113 | 114 | 115 | 116 | ## [4.2.1](https://github.com/frontend-collective/react-image-lightbox/compare/v4.1.0...v4.2.1) (2017-09-07) 117 | 118 | ### Bug Fixes 119 | 120 | - Default to null height instead of 0 ([faa996c](https://github.com/frontend-collective/react-image-lightbox/commit/faa996c)) 121 | 122 | See the GitHub [Releases](https://github.com/frontend-collective/react-image-lightbox/releases) for information on previous releases. 123 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | _Adapted from [bvaughn/react-virtualized/CONTRIBUTING.md](https://github.com/bvaughn/react-virtualized/blob/master/CONTRIBUTING.md)_ 2 | 3 | [Bug Reports](#bugs) | [Features Requests](#features) | [Submitting Pull Requests](#pull-requests) | [Running Local Demo](#running-local-demo) | [Running Tests](#running-tests) 4 | 5 | # Contributing to this project 6 | 7 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 8 | 9 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. 10 | In return, they should reciprocate that respect in addressing your issue or assessing patches and features. 11 | 12 | ## Using the issue tracker 13 | 14 | The issue tracker is the preferred channel for bug reports but please respect the following restrictions: 15 | 16 | - Please **do not** use the issue tracker for personal support requests. 17 | - Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. 18 | 19 | 20 | 21 | ## Bug reports 22 | 23 | A bug is a _demonstrable problem_ that is caused by the code in the repository. 24 | Good bug reports are extremely helpful - thank you! 25 | 26 | Guidelines for bug reports: 27 | 28 | 1. **Use the GitHub issue search** — check if the issue has already been reported. 29 | 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. 30 | 3. **Isolate the problem** — create a [reduced test case](http://css-tricks.com/reduced-test-cases/) and a live example (by forking the [CodeSandbox example](https://codesandbox.io/s/wkw2mjm5l8)). 31 | 32 | A good bug report shouldn't leave others needing to chase you up for more information. 33 | Please try to be as detailed as possible in your report. 34 | Which versions of react-image-lightbox and React are you using? 35 | What steps will reproduce the issue? What browser(s) and OS experience the problem? 36 | What would you expect to be the outcome? 37 | All these details will help people to fix any potential bugs. 38 | 39 | Example: 40 | 41 | > Short and descriptive example bug report title 42 | > 43 | > A summary of the issue and the browser/OS environment in which it occurs. 44 | > If suitable, include the steps required to reproduce the bug. 45 | > 46 | > 1. This is the first step 47 | > 2. This is the second step 48 | > 3. Further steps, etc. 49 | > 50 | > `` - a link to the reduced test case 51 | > 52 | > Any other information you want to share that is relevant to the issue being reported. 53 | > This might include the lines of code that you have identified as causing the bug, 54 | > and potential solutions (and your opinions on their merits). 55 | 56 | 57 | 58 | ## Feature requests 59 | 60 | Feature requests are welcome. 61 | But take a moment to find out whether your idea fits with the scope and aims of the project. 62 | It's up to _you_ to make a strong case to convince the project's developers of the merits of this feature. 63 | Please provide as much detail and context as possible. 64 | 65 | 66 | 67 | ## Pull requests 68 | 69 | Good pull requests - patches, improvements, new features - are a fantastic help. 70 | They should remain focused in scope and avoid containing unrelated commits. 71 | 72 | **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), 73 | otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. 74 | 75 | Please adhere to the coding conventions used throughout a project (indentation, accurate comments, etc.) and any other requirements (such as test coverage). 76 | 77 | Follow this process if you'd like your work considered for inclusion in the project: 78 | 79 | 1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: 80 | 81 | ```bash 82 | # Clone your fork of the repo into the current directory 83 | git clone https://github.com//react-image-lightbox 84 | # Navigate to the newly cloned directory 85 | cd react-image-lightbox 86 | # Assign the original repo to a remote called "upstream" 87 | git remote add upstream https://github.com/frontend-collective/react-image-lightbox 88 | ``` 89 | 90 | 2. If you cloned a while ago, get the latest changes from upstream: 91 | 92 | ```bash 93 | git checkout master 94 | git pull upstream master 95 | ``` 96 | 97 | 3. Install/update dependencies: 98 | 99 | ```bash 100 | npm install 101 | ``` 102 | 103 | 4. Create a new topic branch (off the main project development branch) to 104 | contain your feature, change, or fix: 105 | 106 | ```bash 107 | git checkout -b 108 | ``` 109 | 110 | 5. Commit your changes in logical chunks. 111 | Please follow the [Conventional Commits Specification](https://conventionalcommits.org/) when writing commit messages. This enables use of [standard-version](https://github.com/conventional-changelog/standard-version) to generate a detailed CHANGELOG. 112 | Use Git's [interactive rebase](https://help.github.com/articles/interactive-rebase) 113 | feature to tidy up your commits before making them public. 114 | 115 | 6. Locally merge (or rebase) the upstream development branch into your topic branch: 116 | 117 | ```bash 118 | git pull [--rebase] upstream master 119 | ``` 120 | 121 | 7. Push your topic branch up to your fork: 122 | 123 | ```bash 124 | git push origin 125 | ``` 126 | 127 | 8. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 128 | with a clear title and description. 129 | 130 | **IMPORTANT**: By submitting a patch, you agree to allow the project owner to license your work under the same license as that used by this project (MIT). 131 | 132 | 133 | 134 | ## Running Local Demo 135 | 136 | You can run the local demo with NPM like so: 137 | 138 | ```bash 139 | cd 140 | npm start 141 | ``` 142 | 143 | The local app will then be available at http://localhost:3001 144 | 145 | 146 | 147 | ## Running Tests 148 | 149 | All unit tests must pass before a pull request will be approved. 150 | You can run unit tests with NPM like so: 151 | 152 | ```bash 153 | cd 154 | npm test 155 | ``` 156 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Reporting a Bug? 2 | 3 | Please include either a failing unit test or a simple repro. You can start by forking the [CodeSandbox example](https://codesandbox.io/s/wkw2mjm5l8) 4 | 5 | # Requesting a Feature? 6 | 7 | Provide as much information as possible about your requested feature. Here are a few questions you may consider answering: 8 | 9 | - What's your use case? (Tell me about your application and what problem you're trying to solve.) 10 | - What interface do you have in mind? (What new properties or methods do you think might be helpful?) 11 | - Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.) 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Chris Fritz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > **NOTE**: This package is not maintained any more and will be archived. 2 | > 3 | > [react-photoswipe-gallery](https://www.npmjs.com/package/react-photoswipe-gallery) is a better-maintained and more feature-rich alternative (as of January 2023). 4 | 5 | # React Image Lightbox 6 | 7 | [![NPM](https://nodei.co/npm/react-image-lightbox.png)](https://npmjs.org/package/react-image-lightbox) 8 | [![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) 9 | [![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) 10 | 11 | [![RIL Snapshot](https://user-images.githubusercontent.com/4413963/31209033-78f60df0-a9c3-11e7-8f83-69998d46973e.png)](https://frontend-collective.github.io/react-image-lightbox/) 12 | 13 | A flexible lightbox component for displaying images in a React project. 14 | 15 | [DEMO](https://frontend-collective.github.io/react-image-lightbox/) 16 | 17 | Features 18 | 19 | - Keyboard shortcuts (with rate limiting) 20 | - Image Zoom 21 | - Flexible rendering using src values assigned on the fly 22 | - Image preloading for smoother viewing 23 | - Mobile friendly, with pinch to zoom and swipe (Thanks, [@webcarrot](https://github.com/webcarrot)!) 24 | 25 | ## Example 26 | 27 | ```jsx 28 | import React, { Component } from 'react'; 29 | import Lightbox from 'react-image-lightbox'; 30 | import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app 31 | 32 | const images = [ 33 | '//placekitten.com/1500/500', 34 | '//placekitten.com/4000/3000', 35 | '//placekitten.com/800/1200', 36 | '//placekitten.com/1500/1500', 37 | ]; 38 | 39 | export default class LightboxExample extends Component { 40 | constructor(props) { 41 | super(props); 42 | 43 | this.state = { 44 | photoIndex: 0, 45 | isOpen: false, 46 | }; 47 | } 48 | 49 | render() { 50 | const { photoIndex, isOpen } = this.state; 51 | 52 | return ( 53 |
54 | 57 | 58 | {isOpen && ( 59 | this.setState({ isOpen: false })} 64 | onMovePrevRequest={() => 65 | this.setState({ 66 | photoIndex: (photoIndex + images.length - 1) % images.length, 67 | }) 68 | } 69 | onMoveNextRequest={() => 70 | this.setState({ 71 | photoIndex: (photoIndex + 1) % images.length, 72 | }) 73 | } 74 | /> 75 | )} 76 |
77 | ); 78 | } 79 | } 80 | ``` 81 | 82 | Play with the code on the [example on CodeSandbox](https://codesandbox.io/s/l9n3vnz8yz) 83 | 84 | ## Options 85 | 86 | | Property | Type | Description | 87 | | :------------------------------ | :----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------ | 88 | | mainSrc
_(required)_ | string | Main display image url | 89 | | prevSrc | string | Previous display image url (displayed to the left). If left undefined, `onMovePrevRequest` will not be called, and the button not displayed | 90 | | nextSrc | string | Next display image url (displayed to the right). If left undefined, `onMoveNextRequest` will not be called, and the button not displayed | 91 | | mainSrcThumbnail | string | Thumbnail image url corresponding to `props.mainSrc`. Displayed as a placeholder while the full-sized image loads. | 92 | | prevSrcThumbnail | string | Thumbnail image url corresponding to `props.prevSrc`. Displayed as a placeholder while the full-sized image loads. | 93 | | nextSrcThumbnail | string | Thumbnail image url corresponding to `props.nextSrc`. Displayed as a placeholder while the full-sized image loads. | 94 | | onCloseRequest
_(required)_ | func | Close window event. Should change the parent state such that the lightbox is not rendered | 95 | | 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. | 96 | | 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. | 97 | | onImageLoad | func | Called when an image loads.
`(imageSrc: string, srcType: string, image: object): void`
| 98 | | onImageLoadError | func | Called when an image fails to load.
`(imageSrc: string, srcType: string, errorEvent: object): void`
| 99 | | 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"`. | 100 | | onAfterOpen | func | Called after the modal has rendered. | 101 | | discourageDownloads | bool | When `true`, enables download discouragement (preventing [right-click -> Save Image As...]). Defaults to `false`. | 102 | | animationDisabled | bool | When `true`, image sliding animations are disabled. Defaults to `false`. | 103 | | animationOnKeyInput | bool | When `true`, sliding animations are enabled on actions performed with keyboard shortcuts. Defaults to `false`. | 104 | | animationDuration | number | Animation duration (ms). Defaults to `300`. | 105 | | keyRepeatLimit | number | Required interval of time (ms) between key actions (prevents excessively fast navigation of images). Defaults to `180`. | 106 | | 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`. | 107 | | imageTitle | node | Image title (Descriptive element above image) | 108 | | imageCaption | node | Image caption (Descriptive element below image) | 109 | | imageCrossOrigin | string | `crossorigin` attribute to append to `img` elements ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin)) | 110 | | toolbarButtons | node[] | Array of custom toolbar buttons | 111 | | reactModalStyle | Object | Set `z-index` style, etc., for the parent react-modal ([react-modal style format](https://github.com/reactjs/react-modal#styles)) | 112 | | reactModalProps | Object | Override props set on react-modal (https://github.com/reactjs/react-modal) | 113 | | imagePadding | number | Padding (px) between the edge of the window and the lightbox. Defaults to `10`. | 114 | | clickOutsideToClose | bool | When `true`, clicks outside of the image close the lightbox. Defaults to `true`. | 115 | | enableZoom | bool | Set to `false` to disable zoom functionality and hide zoom buttons. Defaults to `true`. | 116 | | wrapperClassName | string | Class name which will be applied to root element after React Modal | 117 | | nextLabel | string | `aria-label` and `title` set on the 'Next' button. Defaults to `'Next image'`. | 118 | | prevLabel | string | `aria-label` and `title` set on the 'Previous' button. Defaults to `'Previous image'`. | 119 | | zoomInLabel | string | `aria-label` and `title` set on the 'Zoom In' button. Defaults to `'Zoom in'`. | 120 | | zoomOutLabel | string | `aria-label` and `title` set on the 'Zoom Out' button. Defaults to `'Zoom out'`. | 121 | | closeLabel | string | `aria-label` and `title` set on the 'Close Lightbox' button. Defaults to `'Close lightbox'`. | 122 | | loader | node | Custom Loading indicator for loading | 123 | 124 | ## Browser Compatibility 125 | 126 | | Browser | Works? | 127 | | :------ | :----- | 128 | | Chrome | Yes | 129 | | Firefox | Yes | 130 | | Safari | Yes | 131 | | IE 11 | Yes | 132 | 133 | ## Contributing 134 | 135 | After cloning the repository and running `npm install` inside, you can use the following commands to develop and build the project. 136 | 137 | ```sh 138 | # Starts a webpack dev server that hosts a demo page with the lightbox. 139 | # It uses react-hot-loader so changes are reflected on save. 140 | npm start 141 | 142 | # Lints the code with eslint and my custom rules. 143 | yarn run lint 144 | 145 | # Lints and builds the code, placing the result in the dist directory. 146 | # This build is necessary to reflect changes if you're 147 | # `npm link`-ed to this repository from another local project. 148 | yarn run build 149 | ``` 150 | 151 | Pull requests are welcome! 152 | 153 | ## License 154 | 155 | MIT 156 | -------------------------------------------------------------------------------- /__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = 'test-file-stub'; 2 | -------------------------------------------------------------------------------- /examples/cats/app.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Lightbox from '../../src'; 3 | // import Lightbox from 'react-image-lightbox'; 4 | // In your own app, you would need to use import styles once in the app 5 | // import 'react-image-lightbox/styles.css'; 6 | import './stylesheets/vendor/stylesheet.css'; 7 | import './stylesheets/vendor/github-light.css'; 8 | import './stylesheets/app.css'; 9 | import image1 from './images/1.jpg'; 10 | import image2 from './images/2.jpg'; 11 | import image3 from './images/3.jpg'; 12 | import image4 from './images/4.jpg'; 13 | import image1Thumb from './images/1_thumb.jpg'; 14 | import image2Thumb from './images/2_thumb.jpg'; 15 | import image3Thumb from './images/3_thumb.jpg'; 16 | import image4Thumb from './images/4_thumb.jpg'; 17 | 18 | const images = [image1, image2, image3, image4]; 19 | const thumbs = [image1Thumb, image2Thumb, image3Thumb, image4Thumb]; 20 | 21 | const titles = [ 22 | '', 23 | 24 | by  25 | 26 | quatre mains 27 | 28 |   ( 29 | 34 | Some rights reserved 35 | 36 | ) 37 | , 38 | 39 | by  40 | 41 | latch.r 42 | 43 |   ( 44 | 49 | Some rights reserved 50 | 51 | ) 52 | , 53 | 54 | by  55 | 56 | fazen 57 | 58 |   ( 59 | 64 | Some rights reserved 65 | 66 | ) 67 | , 68 | ]; 69 | 70 | const captions = [ 71 | 'Cat in the snow', 72 | '', 73 |

74 | .. not in the  75 | mood 76 |  for games right now 77 |
78 | ... 79 |
80 | ... 81 |
82 | ... 83 |
84 | ... 85 |
86 | ... 87 |
88 | ... 89 |
90 | C'mon. Seriously. 91 |

, 92 | '', 93 | ]; 94 | 95 | class App extends Component { 96 | static onImageLoadError(imageSrc, _srcType, errorEvent) { 97 | console.error(`Could not load image at ${imageSrc}`, errorEvent); // eslint-disable-line no-console 98 | } 99 | 100 | constructor() { 101 | super(); 102 | 103 | this.state = { 104 | index: 0, 105 | isOpen: false, 106 | }; 107 | 108 | this.openLightbox = this.openLightbox.bind(this); 109 | this.closeLightbox = this.closeLightbox.bind(this); 110 | this.moveNext = this.moveNext.bind(this); 111 | this.movePrev = this.movePrev.bind(this); 112 | } 113 | 114 | openLightbox() { 115 | this.setState({ isOpen: true }); 116 | } 117 | 118 | closeLightbox() { 119 | this.setState({ isOpen: false }); 120 | } 121 | 122 | moveNext() { 123 | this.setState(prevState => ({ 124 | index: (prevState.index + 1) % images.length, 125 | })); 126 | } 127 | 128 | movePrev() { 129 | this.setState(prevState => ({ 130 | index: (prevState.index + images.length - 1) % images.length, 131 | })); 132 | } 133 | 134 | render() { 135 | let lightbox; 136 | if (this.state.isOpen) { 137 | lightbox = ( 138 | 156 | ); 157 | } 158 | 159 | return ( 160 |
161 |
162 |

React Image Lightbox

163 | 164 |

165 | Flexible lightbox component for displaying images with React 166 |

167 |
168 | 169 |
170 |

Demo

171 | 172 |
173 | 181 | {lightbox} 182 |
183 | 184 |

Features

185 |
    186 |
  • Keyboard shortcuts (with rate limiting)
    • 187 |
  • Image Zoom
    • 188 |
  • Flexible rendering using src values assigned on the fly
    • 189 |
  • Image preloading for smoother viewing
    • 190 |
  • 191 | Mobile friendly, with pinch to zoom and swipe (Thanks,{' '} 192 | @webcarrot 193 | !) 194 |
    • 195 |
196 | 197 | 198 | Examples and Documentation on Github 199 | 200 | 201 | 222 |
223 | 224 | 225 | Fork me on GitHub 231 | 232 |
233 | ); 234 | } 235 | } 236 | 237 | export default App; 238 | -------------------------------------------------------------------------------- /examples/cats/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/1.jpg -------------------------------------------------------------------------------- /examples/cats/images/1_thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/1_thumb.jpg -------------------------------------------------------------------------------- /examples/cats/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/2.jpg -------------------------------------------------------------------------------- /examples/cats/images/2_thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/2_thumb.jpg -------------------------------------------------------------------------------- /examples/cats/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/3.jpg -------------------------------------------------------------------------------- /examples/cats/images/3_thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/3_thumb.jpg -------------------------------------------------------------------------------- /examples/cats/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/4.jpg -------------------------------------------------------------------------------- /examples/cats/images/4_thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/cats/images/4_thumb.jpg -------------------------------------------------------------------------------- /examples/cats/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Image Lightbox 6 | 7 | 12 | 18 | 24 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /examples/cats/index.js: -------------------------------------------------------------------------------- 1 | /* globals document */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import App from './app'; 5 | 6 | const rootEl = document.getElementById('app'); 7 | ReactDOM.render(, rootEl); 8 | -------------------------------------------------------------------------------- /examples/cats/stylesheets/app.css: -------------------------------------------------------------------------------- 1 | .page-header { 2 | padding: 1rem 6rem; 3 | } 4 | 5 | .main-content { 6 | box-sizing: border-box; 7 | } 8 | 9 | .creditLink { 10 | color: #1e6bb8; 11 | text-decoration: none; 12 | } 13 | .creditLink:hover { 14 | text-decoration: underline; 15 | } 16 | 17 | .demoButton { 18 | border-radius: 5px; 19 | font-size: 1.2rem; 20 | cursor: pointer; 21 | background-color: #303030; 22 | border: none; 23 | color: #fff; 24 | outline: none; 25 | padding: 8px 15px; 26 | } 27 | .demoButton:hover { 28 | background-color: #000; 29 | text-shadow: 0 0 6px #fff; 30 | } 31 | .demoButton:active { 32 | text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff; 33 | } 34 | .demoButton:focus { 35 | box-shadow: 0 0 3px 2px #999; 36 | } 37 | -------------------------------------------------------------------------------- /examples/cats/stylesheets/vendor/github-light.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2014 GitHub Inc. 3 | 4 | Licensed under the Apache License, Version 2.0 (the "License"); 5 | you may not use this file except in compliance with the License. 6 | You may obtain a copy of the License at 7 | 8 | http://www.apache.org/licenses/LICENSE-2.0 9 | 10 | Unless required by applicable law or agreed to in writing, software 11 | distributed under the License is distributed on an "AS IS" BASIS, 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | See the License for the specific language governing permissions and 14 | limitations under the License. 15 | 16 | */ 17 | 18 | .pl-c { 19 | color: #969896; 20 | } 21 | 22 | .pl-c1 23 | /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */, 24 | .pl-s .pl-v { 25 | color: #0086b3; 26 | } 27 | 28 | .pl-e /* entity */, 29 | .pl-en { 30 | color: #795da3; 31 | } 32 | 33 | .pl-s .pl-s1 /* string source */, 34 | .pl-smi { 35 | color: #333; 36 | } 37 | 38 | .pl-ent { 39 | color: #63a35c; 40 | } 41 | 42 | .pl-k { 43 | color: #a71d5d; 44 | } 45 | 46 | .pl-pds /* punctuation.definition.string, string.regexp.character-class */, 47 | .pl-s /* string */, 48 | .pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */, 49 | .pl-sr /* string.regexp */, 50 | .pl-sr .pl-cce /* string.regexp constant.character.escape */, 51 | .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */, 52 | .pl-sr .pl-sre { 53 | color: #183691; 54 | } 55 | 56 | .pl-v { 57 | color: #ed6a43; 58 | } 59 | 60 | .pl-id { 61 | color: #b52a1d; 62 | } 63 | 64 | .pl-ii { 65 | background-color: #b52a1d; 66 | color: #f8f8f8; 67 | } 68 | 69 | .pl-sr .pl-cce { 70 | color: #63a35c; 71 | font-weight: bold; 72 | } 73 | 74 | .pl-ml { 75 | color: #693a17; 76 | } 77 | 78 | .pl-mh /* markup.heading */, 79 | .pl-mh .pl-en /* markup.heading entity.name */, 80 | .pl-ms { 81 | color: #1d3e81; 82 | font-weight: bold; 83 | } 84 | 85 | .pl-mq { 86 | color: #008080; 87 | } 88 | 89 | .pl-mi { 90 | color: #333; 91 | font-style: italic; 92 | } 93 | 94 | .pl-mb { 95 | color: #333; 96 | font-weight: bold; 97 | } 98 | 99 | .pl-md { 100 | background-color: #ffecec; 101 | color: #bd2c00; 102 | } 103 | 104 | .pl-mi1 { 105 | background-color: #eaffea; 106 | color: #55a532; 107 | } 108 | 109 | .pl-mdr { 110 | color: #795da3; 111 | font-weight: bold; 112 | } 113 | 114 | .pl-mo { 115 | color: #1d3e81; 116 | } 117 | -------------------------------------------------------------------------------- /examples/cats/stylesheets/vendor/stylesheet.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .btn { 7 | display: inline-block; 8 | margin-bottom: 1rem; 9 | color: rgba(255, 255, 255, 0.7); 10 | background-color: rgba(255, 255, 255, 0.08); 11 | border-color: rgba(255, 255, 255, 0.2); 12 | border-style: solid; 13 | border-width: 1px; 14 | border-radius: 0.3rem; 15 | transition: color 0.2s, background-color 0.2s, border-color 0.2s; 16 | } 17 | .btn + .btn { 18 | margin-left: 1rem; 19 | } 20 | 21 | .btn:hover { 22 | color: rgba(255, 255, 255, 0.8); 23 | text-decoration: none; 24 | background-color: rgba(255, 255, 255, 0.2); 25 | border-color: rgba(255, 255, 255, 0.3); 26 | } 27 | 28 | @media screen and (min-width: 64em) { 29 | .btn { 30 | padding: 0.75rem 1rem; 31 | } 32 | } 33 | 34 | @media screen and (min-width: 42em) and (max-width: 64em) { 35 | .btn { 36 | padding: 0.6rem 0.9rem; 37 | font-size: 0.9rem; 38 | } 39 | } 40 | 41 | @media screen and (max-width: 42em) { 42 | .btn { 43 | display: block; 44 | width: 100%; 45 | padding: 0.75rem; 46 | font-size: 0.9rem; 47 | } 48 | .btn + .btn { 49 | margin-top: 1rem; 50 | margin-left: 0; 51 | } 52 | } 53 | 54 | .page-header { 55 | color: #fff; 56 | text-align: center; 57 | background-color: #159957; 58 | background-image: linear-gradient(120deg, #155799, #159957); 59 | } 60 | 61 | @media screen and (min-width: 64em) { 62 | .page-header { 63 | padding: 1rem 6rem; 64 | } 65 | } 66 | 67 | @media screen and (min-width: 42em) and (max-width: 64em) { 68 | .page-header { 69 | padding: 1rem 4rem; 70 | } 71 | } 72 | 73 | @media screen and (max-width: 42em) { 74 | .page-header { 75 | padding: 1rem 1rem; 76 | } 77 | } 78 | 79 | .project-name { 80 | margin-top: 0; 81 | margin-bottom: 0.1rem; 82 | } 83 | 84 | @media screen and (min-width: 64em) { 85 | .project-name { 86 | font-size: 3.25rem; 87 | } 88 | } 89 | 90 | @media screen and (min-width: 42em) and (max-width: 64em) { 91 | .project-name { 92 | font-size: 2.25rem; 93 | } 94 | } 95 | 96 | @media screen and (max-width: 42em) { 97 | .project-name { 98 | font-size: 1.75rem; 99 | } 100 | } 101 | 102 | .project-tagline { 103 | margin-bottom: 2rem; 104 | font-weight: normal; 105 | opacity: 0.7; 106 | } 107 | 108 | @media screen and (min-width: 64em) { 109 | .project-tagline { 110 | font-size: 1.25rem; 111 | } 112 | } 113 | 114 | @media screen and (min-width: 42em) and (max-width: 64em) { 115 | .project-tagline { 116 | font-size: 1.15rem; 117 | } 118 | } 119 | 120 | @media screen and (max-width: 42em) { 121 | .project-tagline { 122 | font-size: 1rem; 123 | } 124 | } 125 | 126 | .main-content :first-child { 127 | margin-top: 0; 128 | } 129 | .main-content img { 130 | max-width: 100%; 131 | } 132 | .main-content h1, 133 | .main-content h2, 134 | .main-content h3, 135 | .main-content h4, 136 | .main-content h5, 137 | .main-content h6 { 138 | margin-top: 2rem; 139 | margin-bottom: 1rem; 140 | font-weight: normal; 141 | color: #159957; 142 | } 143 | .main-content p { 144 | margin-bottom: 1em; 145 | } 146 | .main-content code { 147 | padding: 2px 4px; 148 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 149 | font-size: 0.9rem; 150 | color: #383e41; 151 | background-color: #f3f6fa; 152 | border-radius: 0.3rem; 153 | } 154 | .main-content pre { 155 | padding: 0.8rem; 156 | margin-top: 0; 157 | margin-bottom: 1rem; 158 | font: 1rem Consolas, 'Liberation Mono', Menlo, Courier, monospace; 159 | color: #567482; 160 | word-wrap: normal; 161 | background-color: #f3f6fa; 162 | border: solid 1px #dce6f0; 163 | border-radius: 0.3rem; 164 | } 165 | .main-content pre > code { 166 | padding: 0; 167 | margin: 0; 168 | font-size: 0.9rem; 169 | color: #567482; 170 | word-break: normal; 171 | white-space: pre; 172 | background: transparent; 173 | border: 0; 174 | } 175 | .main-content .highlight { 176 | margin-bottom: 1rem; 177 | } 178 | .main-content .highlight pre { 179 | margin-bottom: 0; 180 | word-break: normal; 181 | } 182 | .main-content .highlight pre, 183 | .main-content pre { 184 | padding: 0.8rem; 185 | overflow: auto; 186 | font-size: 0.9rem; 187 | line-height: 1.45; 188 | border-radius: 0.3rem; 189 | } 190 | .main-content pre code, 191 | .main-content pre tt { 192 | display: inline; 193 | max-width: initial; 194 | padding: 0; 195 | margin: 0; 196 | overflow: initial; 197 | line-height: inherit; 198 | word-wrap: normal; 199 | background-color: transparent; 200 | border: 0; 201 | } 202 | .main-content pre code:before, 203 | .main-content pre code:after, 204 | .main-content pre tt:before, 205 | .main-content pre tt:after { 206 | content: normal; 207 | } 208 | .main-content ul, 209 | .main-content ol { 210 | margin-top: 0; 211 | } 212 | .main-content blockquote { 213 | padding: 0 1rem; 214 | margin-left: 0; 215 | color: #819198; 216 | border-left: 0.3rem solid #dce6f0; 217 | } 218 | .main-content blockquote > :first-child { 219 | margin-top: 0; 220 | } 221 | .main-content blockquote > :last-child { 222 | margin-bottom: 0; 223 | } 224 | .main-content table { 225 | display: block; 226 | width: 100%; 227 | overflow: auto; 228 | word-break: normal; 229 | word-break: keep-all; 230 | } 231 | .main-content table th { 232 | font-weight: bold; 233 | } 234 | .main-content table th, 235 | .main-content table td { 236 | padding: 0.5rem 1rem; 237 | border: 1px solid #e9ebec; 238 | } 239 | .main-content dl { 240 | padding: 0; 241 | } 242 | .main-content dl dt { 243 | padding: 0; 244 | margin-top: 1rem; 245 | font-size: 1rem; 246 | font-weight: bold; 247 | } 248 | .main-content dl dd { 249 | padding: 0; 250 | margin-bottom: 1rem; 251 | } 252 | .main-content hr { 253 | height: 2px; 254 | padding: 0; 255 | margin: 1rem 0; 256 | background-color: #eff0f1; 257 | border: 0; 258 | } 259 | 260 | @media screen and (min-width: 64em) { 261 | .main-content { 262 | max-width: 64rem; 263 | padding: 2rem 6rem; 264 | margin: 0 auto; 265 | font-size: 1.1rem; 266 | } 267 | } 268 | 269 | @media screen and (min-width: 42em) and (max-width: 64em) { 270 | .main-content { 271 | padding: 2rem 4rem; 272 | font-size: 1.1rem; 273 | } 274 | } 275 | 276 | @media screen and (max-width: 42em) { 277 | .main-content { 278 | padding: 2rem 1rem; 279 | font-size: 1rem; 280 | } 281 | } 282 | 283 | .site-footer { 284 | padding-top: 2rem; 285 | margin-top: 2rem; 286 | border-top: solid 1px #eff0f1; 287 | } 288 | 289 | .site-footer-owner { 290 | display: block; 291 | font-weight: bold; 292 | } 293 | 294 | .site-footer-credits { 295 | color: #819198; 296 | } 297 | 298 | @media screen and (min-width: 64em) { 299 | .site-footer { 300 | font-size: 1rem; 301 | } 302 | } 303 | 304 | @media screen and (min-width: 42em) and (max-width: 64em) { 305 | .site-footer { 306 | font-size: 1rem; 307 | } 308 | } 309 | 310 | @media screen and (max-width: 42em) { 311 | .site-footer { 312 | font-size: 0.9rem; 313 | } 314 | } 315 | -------------------------------------------------------------------------------- /examples/shared/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/shared/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /examples/shared/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/shared/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /examples/shared/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/shared/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /examples/shared/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-collective/react-image-lightbox/d50bf8484b5a1e8202990873de3a2452fcb3666f/examples/shared/favicon/favicon.ico -------------------------------------------------------------------------------- /examples/shared/favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 16 | 22 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface ILightBoxProps { 4 | mainSrc: string; 5 | nextSrc?: string; 6 | prevSrc?: string; 7 | mainSrcThumbnail?: string; 8 | prevSrcThumbnail?: string; 9 | nextSrcThumbnail?: string; 10 | onCloseRequest(): void; 11 | onMovePrevRequest?(): void; 12 | onMoveNextRequest?(): void; 13 | onImageLoad?(): void; 14 | onImageLoadError?(): void; 15 | imageLoadErrorMessage?: React.ReactNode; 16 | onAfterOpen?(): void; 17 | discourageDownloads?: boolean; 18 | animationDisabled?: boolean; 19 | animationOnKeyInput?: boolean; 20 | animationDuration?: number; 21 | keyRepeatLimit?: number; 22 | keyRepeatKeyupBonus?: number; 23 | imageTitle?: React.ReactNode | string; 24 | imageCaption?: React.ReactNode | string; 25 | imageCrossOrigin?: string; 26 | toolbarButtons?: React.ReactNode[]; 27 | reactModalStyle?: any; 28 | reactModalProps?: any; 29 | imagePadding?: number; 30 | clickOutsideToClose?: boolean; 31 | enableZoom?: boolean; 32 | wrapperClassName?: string; 33 | nextLabel?: string; 34 | prevLabel?: string; 35 | zoomInLabel?: string; 36 | zoomOutLabel?: string; 37 | closeLabel?: string; 38 | } 39 | 40 | export default class Lightbox extends React.Component { } 41 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | setupFilesAfterEnv: ['./node_modules/jest-enzyme/lib/index.js'], 3 | setupFiles: ['./test-config/shim.js', './test-config/test-setup.js'], 4 | moduleFileExtensions: ['js', 'jsx', 'json'], 5 | moduleNameMapper: { 6 | '\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 7 | '/__mocks__/fileMock.js', 8 | }, 9 | snapshotSerializers: ['enzyme-to-json/serializer'], 10 | testEnvironment: 'jsdom', 11 | }; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-image-lightbox", 3 | "version": "5.1.4", 4 | "description": "A lightbox component for React.js", 5 | "scripts": { 6 | "build": "rollup -c", 7 | "build:demo": "parcel build examples/cats/index.html --out-dir build --public-url ./", 8 | "clean": "rimraf dist style.css style.css.map", 9 | "clean:demo": "rimraf build", 10 | "start": "parcel examples/cats/index.html", 11 | "lint": "eslint .", 12 | "prettier": "prettier --write \"./**/*.{md,js,css}\" \"!./{build,dist}/**\" \"!./style.css*\"", 13 | "prepublishOnly": "yarn run lint && yarn run test && yarn run build", 14 | "test": "jest", 15 | "test:watch": "jest --watchAll", 16 | "deploy": "yarn run build:demo && gh-pages -d build", 17 | "release": "standard-version", 18 | "prepare": "husky install" 19 | }, 20 | "main": "dist/index.cjs.js", 21 | "module": "dist/index.es.js", 22 | "typings": "index.d.ts", 23 | "files": [ 24 | "dist", 25 | "index.d.ts", 26 | "style.css", 27 | "style.css.map" 28 | ], 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/frontend-collective/react-image-lightbox.git" 32 | }, 33 | "homepage": "https://frontend-collective.github.io/react-image-lightbox", 34 | "bugs": "https://github.com/frontend-collective/react-image-lightbox/issues", 35 | "authors": [ 36 | "Chris Fritz" 37 | ], 38 | "license": "MIT", 39 | "browserslist": [ 40 | "IE >= 11", 41 | "last 2 versions", 42 | "> 1%" 43 | ], 44 | "dependencies": { 45 | "prop-types": "^15.7.2", 46 | "react-modal": "^3.11.1" 47 | }, 48 | "peerDependencies": { 49 | "react": "16.x || 17.x", 50 | "react-dom": "16.x || 17.x" 51 | }, 52 | "devDependencies": { 53 | "@babel/cli": "^7.7.4", 54 | "@babel/core": "^7.7.4", 55 | "@babel/preset-env": "^7.7.4", 56 | "@babel/preset-react": "^7.7.4", 57 | "autoprefixer": "^9.7.2", 58 | "babel-jest": "^27.0.6", 59 | "coveralls": "^3.0.9", 60 | "cross-env": "^7.0.3", 61 | "enzyme": "^3.10.0", 62 | "enzyme-adapter-react-16": "^1.15.1", 63 | "enzyme-to-json": "^3.4.3", 64 | "eslint": "^6.7.1", 65 | "eslint-config-airbnb": "^18.0.1", 66 | "eslint-config-prettier": "^6.7.0", 67 | "eslint-plugin-import": "^2.18.2", 68 | "eslint-plugin-jsx-a11y": "^6.2.3", 69 | "eslint-plugin-react": "^7.16.0", 70 | "eslint-plugin-react-hooks": "^4.2.0", 71 | "gh-pages": "^3.2.3", 72 | "husky": "^7.0.0", 73 | "jest": "^27.0.6", 74 | "jest-enzyme": "^7.1.2", 75 | "parcel-bundler": "^1.12.4", 76 | "postcss": "^8.3.5", 77 | "prettier": "^1.19.1", 78 | "pretty-quick": "^2.0.1", 79 | "react": "^16.12.0", 80 | "react-dom": "^16.12.0", 81 | "rimraf": "^3.0.0", 82 | "rollup": "^2.53.1", 83 | "rollup-plugin-babel": "^4.3.3", 84 | "rollup-plugin-commonjs": "^10.1.0", 85 | "rollup-plugin-node-resolve": "^5.2.0", 86 | "rollup-plugin-postcss": "^4.0.0", 87 | "standard-version": "^9.3.0" 88 | }, 89 | "keywords": [ 90 | "react", 91 | "react-component", 92 | "image", 93 | "lightbox" 94 | ] 95 | } 96 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import nodeResolve from 'rollup-plugin-node-resolve'; 2 | import commonjs from 'rollup-plugin-commonjs'; 3 | import babel from 'rollup-plugin-babel'; 4 | import postcss from 'rollup-plugin-postcss'; 5 | 6 | import pkg from './package.json'; 7 | 8 | export default { 9 | input: './src/index.js', 10 | output: [ 11 | { 12 | entryFileNames: pkg.main, 13 | format: 'cjs', 14 | exports: 'named', 15 | dir: __dirname, 16 | }, 17 | { 18 | entryFileNames: pkg.module, 19 | format: 'esm', 20 | exports: 'named', 21 | dir: __dirname, 22 | }, 23 | ], 24 | external: [ 25 | ...Object.keys(pkg.dependencies), 26 | ...Object.keys(pkg.peerDependencies), 27 | ], 28 | plugins: [ 29 | nodeResolve(), 30 | postcss({ extract: 'style.css' }), 31 | commonjs({ 32 | include: 'node_modules/**', 33 | }), 34 | babel({ 35 | exclude: 'node_modules/**', 36 | }), 37 | ], 38 | }; 39 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/react-image-lightbox.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Snapshot Testing Lightbox renders properly" 1`] = ` 4 |