From e74b7c99eb4642a42631d2372b46645f044b8414 Mon Sep 17 00:00:00 2001 From: fritz-c Date: Sun, 29 Apr 2018 09:14:29 +0900 Subject: [PATCH] feat: migrated away from style-loader This library no longer uses style-loader to add the necessary style for the lightbox. You will instead need to load it as shown in the README. This was done to allow for easier style customization, as well as streamline usage in server-side rendered apps. BREAKING CHANGE: you must you must import the css for the component yourself, using `import 'react-image-lightbox/style.css';`. You only need to do this once in your application. BREAKING CHANGE: Versions of IE earlier than IE 11 are no longer supported. --- .gitignore | 2 + README.md | 1 + examples/cats/app.js | 47 +- .../cats/stylesheets/{app.scss => app.css} | 33 +- .../{github-light.scss => github-light.css} | 0 .../{stylesheet.scss => stylesheet.css} | 0 package-lock.json | 6193 +++++++---------- package.json | 21 +- src/index.js | 4 +- src/react-image-lightbox.js | 166 +- src/{style.scss => style.css} | 266 +- src/util.js | 19 - webpack.config.js | 43 +- 13 files changed, 2891 insertions(+), 3904 deletions(-) rename examples/cats/stylesheets/{app.scss => app.css} (50%) rename examples/cats/stylesheets/vendor/{github-light.scss => github-light.css} (100%) rename examples/cats/stylesheets/vendor/{stylesheet.scss => stylesheet.css} (100%) rename src/{style.scss => style.css} (56%) diff --git a/.gitignore b/.gitignore index 0728b701..e87e275e 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,5 @@ npm-debug.log # Build directories (Will be preserved by npm) dist build +/style.css +/style.css.map diff --git a/README.md b/README.md index a4612fbd..165e9fe0 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Features ```jsx import React, { Component } from 'react'; import Lightbox from 'react-image-lightbox'; +import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app const images = [ '//placekitten.com/1500/500', diff --git a/examples/cats/app.js b/examples/cats/app.js index 356e194f..8c52628d 100644 --- a/examples/cats/app.js +++ b/examples/cats/app.js @@ -1,6 +1,11 @@ import React, { Component } from 'react'; -import Lightbox from '../../src/react-image-lightbox'; -import styles from './stylesheets/app.scss'; +import Lightbox from '../../src'; +// import Lightbox from 'react-image-lightbox'; +// In your own app, you would need to use import styles once in the app +// import 'react-image-lightbox/styles.css'; +import './stylesheets/vendor/stylesheet.css'; +import './stylesheets/vendor/github-light.css'; +import './stylesheets/app.css'; import image1 from './images/1.jpg'; import image2 from './images/2.jpg'; import image3 from './images/3.jpg'; @@ -22,11 +27,11 @@ const titles = [ '', by  - + quatre mains   ( @@ -35,14 +40,11 @@ const titles = [ , by  - + latch.r   ( @@ -51,11 +53,11 @@ const titles = [ , by  - + fazen   ( @@ -101,13 +103,6 @@ class App extends Component { this.movePrev = this.movePrev.bind(this); } - componentDidMount() { - if (typeof window !== 'undefined') { - // eslint-disable-next-line no-underscore-dangle - styles._insertCss(); - } - } - openLightbox() { this.setState({ isOpen: true }); } @@ -153,22 +148,22 @@ class App extends Component { return (
-
-

React Image Lightbox

+
+

React Image Lightbox

-

+

Flexible lightbox component for displaying images with React

-
+

Demo