react-image-gallery - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

build/image-gallery.js

@@ -341,2 +341,6 @@ 'use strict';
 
+      if (this.props.onScreenChange) {
+        this.props.onScreenChange(fullScreenElement);
+      }
+
       this.setState({ isFullscreen: !!fullScreenElement });
@@ -780,3 +784,3 @@ }
           'div',
-          { className: 'image-gallery-content' },
+          { className: 'image-gallery-content' + (isFullscreen ? ' fullscreen' : '') },
           _react2.default.createElement(
@@ -862,3 +866,3 @@ 'div',
             {
-              className: 'image-gallery-thumbnails' + (isFullscreen ? ' fullscreen' : ''),
+              className: 'image-gallery-thumbnails',
               ref: function ref(i) {
@@ -865,0 +869,0 @@ return _this7._imageGalleryThumbnail = i;

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "React Carousel, React Image gallery, React Slide Show component",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -14,3 +14,4 @@ React Image Gallery
 * Thumbnail navigation
-* Custom slides (video slides)
+* Fullscreen support
+* Custom rendered slides
 * Responsive design
@@ -50,10 +51,2 @@
 
-  handlePlay() {
-    this._imageGallery.play()
-  }
-
-  handlePause() {
-    this._imageGallery.pause()
-  }
-
   render() {
@@ -85,11 +78,7 @@
     return (
-      <div>
-        <button onClick={this.handlePlay.bind(this)}>Play</button>
-        <button onClick={this.handlePause.bind(this)}>Pause</button>
-        <ImageGallery
-          ref={i => this._imageGallery = i}
-          items={images}
-          slideInterval={2000}
-          onImageLoad={this.handleImageLoad}/>
-      </div>
+      <ImageGallery
+        ref={i => this._imageGallery = i}
+        items={images}
+        slideInterval={2000}
+        onImageLoad={this.handleImageLoad}/>
     );
@@ -131,2 +120,3 @@ }
 * `onSlide`: Function, `callback(currentIndex)`
+* `onScreenChange`: Function, `callback(fullscreenElement)`
 * `onPause`: Function, `callback(currentIndex)`
@@ -133,0 +123,0 @@ * `onPlay`: Function, `callback(currentIndex)`

src/ImageGallery.jsx

@@ -295,2 +295,6 @@ import React from 'react';
 
+    if (this.props.onScreenChange) {
+      this.props.onScreenChange(fullScreenElement);
+    }
+
     this.setState({isFullscreen: !!fullScreenElement});
@@ -707,3 +711,3 @@ }
 
-        <div className='image-gallery-content'>
+        <div className={`image-gallery-content${isFullscreen ? ' fullscreen' : ''}`}>
           <div
@@ -794,4 +798,3 @@ className='image-gallery-slide-wrapper'>
               <div
-                className={
-                  `image-gallery-thumbnails${isFullscreen ? ' fullscreen' : ''}`}
+                className='image-gallery-thumbnails'
                 ref={i => this._imageGalleryThumbnail = i}
@@ -798,0 +801,0 @@ >

No alert changes

Improved metrics

Total package byte prevSize

300017

increased by1.28%

Number of package files

15

increased by7.14%

Lines of code

2786

increased by4.89%

Worsened metrics

Number of lines in readme file

177

decreased by-5.35%

No dependency changes