react-image-gallery 1.2.11 → 1.3.0

package/src/components/ImageGallery.test.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ImageGallery from "./ImageGallery";
+
+describe("<ImageGallery />", () => {
+  const defaultProps = {
+    items: [
+      {
+        original: "test.png",
+        thumbnail: "test_thumb.png",
+      },
+    ],
+  };
+
+  it("renders slides", () => {
+    render(<ImageGallery {...defaultProps} />);
+    const elements = screen.getAllByLabelText("Go to Slide 1");
+    // expect a thumbnail and slide label
+    expect(elements.length).toBe(2);
+  });
+});

package/src/components/Item.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { bool, func, string } from "prop-types";
+
+const defaultProps = {
+  description: "",
+  fullscreen: "",
+  isFullscreen: false,
+  originalAlt: "",
+  originalHeight: "",
+  originalWidth: "",
+  originalTitle: "",
+  sizes: "",
+  srcSet: "",
+  loading: "eager",
+};
+
+const Item = React.memo((props) => {
+  const {
+    description,
+    fullscreen, // fullscreen version of img
+    handleImageLoaded,
+    isFullscreen,
+    onImageError,
+    original,
+    originalAlt,
+    originalHeight,
+    originalWidth,
+    originalTitle,
+    sizes,
+    srcSet,
+    loading,
+  } = { ...defaultProps, ...props };
+  const itemSrc = isFullscreen ? fullscreen || original : original;
+
+  return (
+    <React.Fragment>
+      <img
+        className="image-gallery-image"
+        src={itemSrc}
+        alt={originalAlt}
+        srcSet={srcSet}
+        height={originalHeight}
+        width={originalWidth}
+        sizes={sizes}
+        title={originalTitle}
+        onLoad={(event) => handleImageLoaded(event, original)}
+        onError={onImageError}
+        loading={loading}
+      />
+      {description && (
+        <span className="image-gallery-description">{description}</span>
+      )}
+    </React.Fragment>
+  );
+});
+
+Item.displayName = "Item";
+
+Item.propTypes = {
+  description: string,
+  fullscreen: string, // fullscreen version of img
+  handleImageLoaded: func.isRequired,
+  isFullscreen: bool,
+  onImageError: func.isRequired,
+  original: string.isRequired,
+  originalAlt: string,
+  originalHeight: string,
+  originalWidth: string,
+  originalTitle: string,
+  sizes: string,
+  srcSet: string,
+  loading: string,
+};
+
+export default Item;

package/src/{SVG.js → components/SVG.jsx}

@@ -1,10 +1,14 @@
-import React from 'react';
-import { number, oneOf, string } from 'prop-types';
+import React from "react";
+import { number, oneOf, string } from "prop-types";
 
 const left = <polyline points="15 18 9 12 15 6" />;
 const right = <polyline points="9 18 15 12 9 6" />;
-const maximize = <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />;
-const minimize = <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />;
+const maximize = (
+  <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+);
+const minimize = (
+  <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+);
 const play = <polygon points="5 3 19 12 5 21 5 3" />;
 const pause = (
   <React.Fragment>
@@ -22,12 +26,13 @@ const iconMapper = {
   pause,
 };
 
+const defaultProps = {
+  strokeWidth: 1,
+  viewBox: "0 0 24 24",
+};
+
 const SVG = (props) => {
-  const {
-    strokeWidth,
-    viewBox,
-    icon,
-  } = props;
+  const { strokeWidth, viewBox, icon } = { ...defaultProps, ...props };
   return (
     <svg
       className="image-gallery-svg"
@@ -47,19 +52,8 @@ const SVG = (props) => {
 SVG.propTypes = {
   strokeWidth: number,
   viewBox: string,
-  icon: oneOf([
-    'left',
-    'right',
-    'maximize',
-    'minimize',
-    'play',
-    'pause',
-  ]).isRequired,
-};
-
-SVG.defaultProps = {
-  strokeWidth: 1,
-  viewBox: '0 0 24 24',
+  icon: oneOf(["left", "right", "maximize", "minimize", "play", "pause"])
+    .isRequired,
 };
 
 export default SVG;

package/src/{SwipeWrapper.js → components/SwipeWrapper.jsx}

@@ -1,19 +1,19 @@
-import React from 'react';
-import {
-  string,
-  node,
-  number,
-  func,
-} from 'prop-types';
-import { useSwipeable } from 'react-swipeable';
+import React from "react";
+import { string, node, number, func } from "prop-types";
+import { useSwipeable } from "react-swipeable";
 
-const SwipeWrapper = ({
-  children,
-  className,
-  delta,
-  onSwiping,
-  onSwiped,
-}) => {
+const defaultProps = {
+  className: "",
+  delta: 0,
+  onSwiping: () => {},
+  onSwiped: () => {},
+};
+
+const SwipeWrapper = (props) => {
+  const { children, className, delta, onSwiping, onSwiped } = {
+    ...defaultProps,
+    ...props,
+  };
   const swipeHandlers = useSwipeable({
     delta,
     onSwiping,
@@ -34,11 +34,4 @@ SwipeWrapper.propTypes = {
   onSwiping: func,
 };
 
-SwipeWrapper.defaultProps = {
-  className: '',
-  delta: 0,
-  onSwiping: () => {},
-  onSwiped: () => {},
-};
-
 export default SwipeWrapper;

package/src/{controls/Fullscreen.js → components/controls/Fullscreen.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const Fullscreen = React.memo(({
-  isFullscreen,
-  onClick,
-}) => {
+const Fullscreen = React.memo(({ isFullscreen, onClick }) => {
   return (
     <button
       type="button"
@@ -13,17 +10,16 @@ const Fullscreen = React.memo(({
       onClick={onClick}
       aria-label="Open Fullscreen"
     >
-      <SVG strokeWidth={2} icon={isFullscreen ? 'minimize' : 'maximize'} />
+      <SVG strokeWidth={2} icon={isFullscreen ? "minimize" : "maximize"} />
     </button>
   );
 });
 
-Fullscreen.displayName = 'Fullscreen';
+Fullscreen.displayName = "Fullscreen";
 
 Fullscreen.propTypes = {
   isFullscreen: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default Fullscreen;

package/src/{controls/LeftNav.js → components/controls/LeftNav.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const LeftNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const LeftNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const LeftNav = React.memo(({
   );
 });
 
-LeftNav.displayName = 'LeftNav';
+LeftNav.displayName = "LeftNav";
 
 LeftNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default LeftNav;

package/src/{controls/PlayPause.js → components/controls/PlayPause.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const PlayPause = React.memo(({
-  isPlaying,
-  onClick,
-}) => {
+const PlayPause = React.memo(({ isPlaying, onClick }) => {
   return (
     <button
       type="button"
@@ -13,17 +10,16 @@ const PlayPause = React.memo(({
       onClick={onClick}
       aria-label="Play or Pause Slideshow"
     >
-      <SVG strokeWidth={2} icon={isPlaying ? 'pause' : 'play'} />
+      <SVG strokeWidth={2} icon={isPlaying ? "pause" : "play"} />
     </button>
   );
 });
 
-PlayPause.displayName = 'PlayPause';
+PlayPause.displayName = "PlayPause";
 
 PlayPause.propTypes = {
   isPlaying: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default PlayPause;

package/src/{controls/RightNav.js → components/controls/RightNav.jsx}

@@ -1,11 +1,8 @@
-import React from 'react';
-import { bool, func } from 'prop-types';
-import SVG from 'src/SVG';
+import React from "react";
+import { bool, func } from "prop-types";
+import SVG from "src/components/SVG";
 
-const RightNav = React.memo(({
-  disabled,
-  onClick,
-}) => {
+const RightNav = React.memo(({ disabled, onClick }) => {
   return (
     <button
       type="button"
@@ -19,12 +16,11 @@ const RightNav = React.memo(({
   );
 });
 
-RightNav.displayName = 'RightNav';
+RightNav.displayName = "RightNav";
 
 RightNav.propTypes = {
   disabled: bool.isRequired,
   onClick: func.isRequired,
 };
 
-
 export default RightNav;

package/styles/css/image-gallery.css

@@ -1 +1 @@
-.image-gallery-icon{color:#fff;transition:all .3s ease-out;appearance:none;background-color:transparent;border:0;cursor:pointer;outline:none;position:absolute;z-index:4;filter:drop-shadow(0 2px 2px #1a1a1a)}@media(hover: hover)and (pointer: fine){.image-gallery-icon:hover{color:#337ab7}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid #337ab7}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:28px;width:28px}@media(max-width: 768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:15px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media(max-width: 480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:10px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:50px 10px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:60px}@media(max-width: 768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:36px}}@media(max-width: 480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.image-gallery.fullscreen-modal{background:#000;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{position:relative;line-height:0;top:0}.image-gallery-content.fullscreen{background:#000}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.left .image-gallery-slide .image-gallery-image,.image-gallery-content.right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.left,.image-gallery-slide-wrapper.right{display:inline-block;width:calc(100% - 110px)}@media(max-width: 768px){.image-gallery-slide-wrapper.left,.image-gallery-slide-wrapper.right{width:calc(100% - 87px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-slides{line-height:0;overflow:hidden;position:relative;white-space:nowrap;text-align:center}.image-gallery-slide{left:0;position:absolute;top:0;width:100%}.image-gallery-slide.center{position:relative}.image-gallery-slide .image-gallery-image{width:100%;object-fit:contain}.image-gallery-slide .image-gallery-description{background:rgba(0,0,0,.4);bottom:70px;color:#fff;left:0;line-height:1;padding:10px 20px;position:absolute;white-space:normal}@media(max-width: 768px){.image-gallery-slide .image-gallery-description{bottom:45px;font-size:.8em;padding:8px 15px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 2px 2px #1a1a1a;cursor:pointer;display:inline-block;margin:0 5px;outline:none;padding:5px;transition:all .2s ease-out}@media(max-width: 768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets .image-gallery-bullet{padding:2.7px}}.image-gallery-bullets .image-gallery-bullet:focus{transform:scale(1.2);background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active{transform:scale(1.2);border:1px solid #fff;background:#fff}@media(hover: hover)and (pointer: fine){.image-gallery-bullets .image-gallery-bullet:hover{background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active:hover{background:#337ab7}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.left,.image-gallery-thumbnails-wrapper.right{display:inline-block;vertical-align:top;width:100px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.left,.image-gallery-thumbnails-wrapper.right{width:81px}}.image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails{height:100%;width:100%;left:0;padding:0;position:absolute;top:0}.image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.left,.image-gallery-thumbnails-wrapper.right{margin:0 5px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.left,.image-gallery-thumbnails-wrapper.right{margin:0 3px}}.image-gallery-thumbnails{overflow:hidden;padding:5px 0}@media(max-width: 768px){.image-gallery-thumbnails{padding:3px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{display:inline-block;border:4px solid transparent;transition:border .3s ease-out;width:100px;background:transparent;padding:0}@media(max-width: 768px){.image-gallery-thumbnail{border:3px solid transparent;width:81px}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{vertical-align:middle;width:100%;line-height:0}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{outline:none;border:4px solid #337ab7}@media(max-width: 768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:3px solid #337ab7}}@media(hover: hover)and (pointer: fine){.image-gallery-thumbnail:hover{outline:none;border:4px solid #337ab7}}@media(hover: hover)and (pointer: fine)and (max-width: 768px){.image-gallery-thumbnail:hover{border:3px solid #337ab7}}.image-gallery-thumbnail-label{box-sizing:border-box;color:#fff;font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;top:50%;text-shadow:0 2px 2px #1a1a1a;transform:translateY(-50%);white-space:normal;width:100%}@media(max-width: 768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:rgba(0,0,0,.4);color:#fff;line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media(max-width: 768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}
+.image-gallery-icon{color:#fff;transition:all .3s ease-out;appearance:none;background-color:transparent;border:0;cursor:pointer;outline:none;position:absolute;z-index:4;filter:drop-shadow(0 2px 2px #1a1a1a)}@media(hover: hover)and (pointer: fine){.image-gallery-icon:hover{color:#337ab7}.image-gallery-icon:hover .image-gallery-svg{transform:scale(1.1)}}.image-gallery-icon:focus{outline:2px solid #337ab7}.image-gallery-using-mouse .image-gallery-icon:focus{outline:none}.image-gallery-fullscreen-button,.image-gallery-play-button{bottom:0;padding:20px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:28px;width:28px}@media(max-width: 768px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:15px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:24px;width:24px}}@media(max-width: 480px){.image-gallery-fullscreen-button,.image-gallery-play-button{padding:10px}.image-gallery-fullscreen-button .image-gallery-svg,.image-gallery-play-button .image-gallery-svg{height:16px;width:16px}}.image-gallery-fullscreen-button{right:0}.image-gallery-play-button{left:0}.image-gallery-left-nav,.image-gallery-right-nav{padding:50px 10px;top:50%;transform:translateY(-50%)}.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:120px;width:60px}@media(max-width: 768px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:72px;width:36px}}@media(max-width: 480px){.image-gallery-left-nav .image-gallery-svg,.image-gallery-right-nav .image-gallery-svg{height:48px;width:24px}}.image-gallery-left-nav[disabled],.image-gallery-right-nav[disabled]{cursor:disabled;opacity:.6;pointer-events:none}.image-gallery-left-nav{left:0}.image-gallery-right-nav{right:0}.image-gallery{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.image-gallery.fullscreen-modal{background:#000;bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:5}.image-gallery.fullscreen-modal .image-gallery-content{top:50%;transform:translateY(-50%)}.image-gallery-content{position:relative;line-height:0;top:0}.image-gallery-content.fullscreen{background:#000}.image-gallery-content .image-gallery-slide .image-gallery-image{max-height:calc(100vh - 80px)}.image-gallery-content.image-gallery-thumbnails-left .image-gallery-slide .image-gallery-image,.image-gallery-content.image-gallery-thumbnails-right .image-gallery-slide .image-gallery-image{max-height:100vh}.image-gallery-slide-wrapper{position:relative}.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{display:inline-block;width:calc(100% - 110px)}@media(max-width: 768px){.image-gallery-slide-wrapper.image-gallery-thumbnails-left,.image-gallery-slide-wrapper.image-gallery-thumbnails-right{width:calc(100% - 87px)}}.image-gallery-slide-wrapper.image-gallery-rtl{direction:rtl}.image-gallery-slides{line-height:0;overflow:hidden;position:relative;white-space:nowrap;text-align:center}.image-gallery-slide{left:0;position:absolute;top:0;width:100%}.image-gallery-slide.image-gallery-center{position:relative}.image-gallery-slide .image-gallery-image{width:100%;object-fit:contain}.image-gallery-slide .image-gallery-description{background:rgba(0,0,0,.4);bottom:70px;color:#fff;left:0;line-height:1;padding:10px 20px;position:absolute;white-space:normal}@media(max-width: 768px){.image-gallery-slide .image-gallery-description{bottom:45px;font-size:.8em;padding:8px 15px}}.image-gallery-bullets{bottom:20px;left:0;margin:0 auto;position:absolute;right:0;width:80%;z-index:4}.image-gallery-bullets .image-gallery-bullets-container{margin:0;padding:0;text-align:center}.image-gallery-bullets .image-gallery-bullet{appearance:none;background-color:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 2px 2px #1a1a1a;cursor:pointer;display:inline-block;margin:0 5px;outline:none;padding:5px;transition:all .2s ease-out}@media(max-width: 768px){.image-gallery-bullets .image-gallery-bullet{margin:0 3px;padding:3px}}@media(max-width: 480px){.image-gallery-bullets .image-gallery-bullet{padding:2.7px}}.image-gallery-bullets .image-gallery-bullet:focus{transform:scale(1.2);background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active{transform:scale(1.2);border:1px solid #fff;background:#fff}@media(hover: hover)and (pointer: fine){.image-gallery-bullets .image-gallery-bullet:hover{background:#337ab7;border:1px solid #337ab7}.image-gallery-bullets .image-gallery-bullet.active:hover{background:#337ab7}}.image-gallery-thumbnails-wrapper{position:relative}.image-gallery-thumbnails-wrapper.thumbnails-swipe-horizontal{touch-action:pan-y}.image-gallery-thumbnails-wrapper.thumbnails-swipe-vertical{touch-action:pan-x}.image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl{direction:rtl}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{display:inline-block;vertical-align:top;width:100px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{width:81px}}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails{height:100%;width:100%;left:0;padding:0;position:absolute;top:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail{display:block;margin-right:0;padding:0}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right .image-gallery-thumbnails .image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:0;margin-top:2px}.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 5px}@media(max-width: 768px){.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-left,.image-gallery-thumbnails-wrapper.image-gallery-thumbnails-right{margin:0 3px}}.image-gallery-thumbnails{overflow:hidden;padding:5px 0}@media(max-width: 768px){.image-gallery-thumbnails{padding:3px 0}}.image-gallery-thumbnails .image-gallery-thumbnails-container{cursor:pointer;text-align:center;white-space:nowrap}.image-gallery-thumbnail{display:inline-block;border:4px solid transparent;transition:border .3s ease-out;width:100px;background:transparent;padding:0}@media(max-width: 768px){.image-gallery-thumbnail{border:3px solid transparent;width:81px}}.image-gallery-thumbnail+.image-gallery-thumbnail{margin-left:2px}.image-gallery-thumbnail .image-gallery-thumbnail-inner{display:block;position:relative}.image-gallery-thumbnail .image-gallery-thumbnail-image{vertical-align:middle;width:100%;line-height:0}.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{outline:none;border:4px solid #337ab7}@media(max-width: 768px){.image-gallery-thumbnail.active,.image-gallery-thumbnail:focus{border:3px solid #337ab7}}@media(hover: hover)and (pointer: fine){.image-gallery-thumbnail:hover{outline:none;border:4px solid #337ab7}}@media(hover: hover)and (pointer: fine)and (max-width: 768px){.image-gallery-thumbnail:hover{border:3px solid #337ab7}}.image-gallery-thumbnail-label{box-sizing:border-box;color:#fff;font-size:1em;left:0;line-height:1em;padding:5%;position:absolute;top:50%;text-shadow:0 2px 2px #1a1a1a;transform:translateY(-50%);white-space:normal;width:100%}@media(max-width: 768px){.image-gallery-thumbnail-label{font-size:.8em;line-height:.8em}}.image-gallery-index{background:rgba(0,0,0,.4);color:#fff;line-height:1;padding:10px 20px;position:absolute;right:0;top:0;z-index:4}@media(max-width: 768px){.image-gallery-index{font-size:.8em;padding:5px 10px}}

package/styles/scss/image-gallery.scss

@@ -163,8 +163,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     max-height: calc(100vh - 80px); // 80 px for the thumbnail space
   }
 
-  &.left,
-  &.right {
+  &.image-gallery-thumbnails-left,
+  &.image-gallery-thumbnails-right {
     .image-gallery-slide .image-gallery-image {
       max-height: 100vh;
     }
@@ -174,8 +174,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
 .image-gallery-slide-wrapper {
   position: relative;
 
-  &.left,
-  &.right {
+  &.image-gallery-thumbnails-left,
+  &.image-gallery-thumbnails-right {
     display: inline-block;
     width: calc(100% - 110px); // 100px + 10px for margin
 
@@ -202,7 +202,7 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   top: 0;
   width: 100%;
 
-  &.center {
+  &.image-gallery-center {
     position: relative;
   }
 
@@ -306,8 +306,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
   &.thumbnails-wrapper-rtl {
     direction: rtl;
   }
-  &.left,
-  &.right {
+  &.image-gallery-thumbnails-left,
+  &.image-gallery-thumbnails-right {
     display: inline-block;
     vertical-align: top;
     width: 100px;
@@ -339,8 +339,8 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     }
   }
 
-  &.left,
-  &.right {
+  &.image-gallery-thumbnails-left,
+  &.image-gallery-thumbnails-right {
     margin: 0 5px;
 
     @media (max-width: $ig-small-screen) {
@@ -450,4 +450,4 @@ $ig-shadow: 0 2px 2px lighten($ig-black, 10%);
     font-size: .8em;
     padding: 5px 10px;
   }
-}
+}

package/webpack.build.js

@@ -1,57 +1,56 @@
-
-const path = require('path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const RemovePlugin = require('remove-files-webpack-plugin');
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemovePlugin = require("remove-files-webpack-plugin");
 
 const config = {
-  mode: 'production',
+  mode: "production",
 };
 
 const jsOutput = Object.assign({}, config, {
-  entry: [ './src/ImageGallery.js', ],
+  entry: ["./src/components/ImageGallery.jsx"],
   output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'image-gallery.js',
-    library: 'ImageGallery',
-    globalObject: 'this',
-    libraryTarget: 'umd',
+    path: path.resolve(__dirname, "build"),
+    filename: "image-gallery.js",
+    library: "ImageGallery",
+    globalObject: "this",
+    libraryTarget: "umd",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-      }
-    ]
+        loader: "babel-loader",
+      },
+    ],
   },
   externals: {
     // Don't bundle react or react-dom
     react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'react',
-      root: 'React',
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react",
+      root: "React",
     },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'react-dom',
-      root: 'ReactDOM',
+    "react-dom": {
+      commonjs: "react-dom",
+      commonjs2: "react-dom",
+      amd: "react-dom",
+      root: "ReactDOM",
     },
   },
 });
 
 const cssOutput = Object.assign({}, config, {
-  entry: './styles/scss/image-gallery.scss',
+  entry: "./styles/scss/image-gallery.scss",
   output: {
-    path: path.resolve(__dirname, 'styles/css'),
+    path: path.resolve(__dirname, "styles/css"),
   },
   module: {
     rules: [
@@ -60,16 +59,16 @@ const cssOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'image-gallery.css',
+      filename: "image-gallery.css",
     }),
     new RemovePlugin({
       /**
@@ -78,36 +77,36 @@ const cssOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'styles/css',
+            folder: "styles/css",
             method: (absoluteItemPath) => {
-              return new RegExp(/\.js$/, 'm').test(absoluteItemPath);
+              return new RegExp(/\.js$/, "m").test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const jsDemoOutput = Object.assign({}, config, {
-  entry: [ './example/app.js', ],
+  entry: ["./example/App.jsx"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
-    filename: 'demo.mini.js',
+    path: path.resolve(__dirname, "demo"),
+    filename: "demo.mini.js",
   },
   resolve: {
     alias: {
-      src: path.resolve(__dirname, 'src/'),
+      src: path.resolve(__dirname, "src/"),
     },
-    extensions: ['.js']
+    extensions: [".js", ".jsx"],
   },
   module: {
     rules: [
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-      }
-    ]
+        test: /\.(js|jsx)$/,
+        loader: "babel-loader",
+      },
+    ],
   },
   plugins: [
     new RemovePlugin({
@@ -117,21 +116,21 @@ const jsDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.txt$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });
 
 const cssDemoOutput = Object.assign({}, config, {
-  entry: ['./styles/scss/image-gallery.scss', './example/app.css'],
+  entry: ["./styles/scss/image-gallery.scss", "./example/App.css"],
   output: {
-    path: path.resolve(__dirname, 'demo'),
+    path: path.resolve(__dirname, "demo"),
   },
   module: {
     rules: [
@@ -140,16 +139,16 @@ const cssDemoOutput = Object.assign({}, config, {
         use: [
           MiniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: 'demo.mini.css',
+      filename: "demo.mini.css",
     }),
     new RemovePlugin({
       /**
@@ -158,13 +157,13 @@ const cssDemoOutput = Object.assign({}, config, {
       after: {
         test: [
           {
-            folder: 'demo',
+            folder: "demo",
             method: (absoluteItemPath) => {
               return new RegExp(/\.js$/).test(absoluteItemPath);
             },
-          }
-        ]
-      }
+          },
+        ],
+      },
     }),
   ],
 });