react-photo-gallery - npm Package Compare versions

Comparing version 6.0.2 to 6.0.3

examples/src/ExampleBasic.js

@@ -7,3 +7,3 @@ import React from 'react';
       <div>
-        <h2>Basic:</h2>
+        <h2>Basic</h2>
         <Gallery photos={photos} columns={columns} />
@@ -10,0 +10,0 @@ </div>

examples/src/ExampleCustomComponentSelection.js

@@ -24,5 +24,5 @@ import React from 'react';
       <div>
-        <h2>Using the Custom Image Component:</h2>
+        <h2>Using the ImageComponent prop</h2>
         <h3>Pass in a custom image component to create any visual representation such as selection</h3>
-        <button className="toggle-select" onClick={this.toggleSelect}>toggle select</button>
+        <p><button className="toggle-select" onClick={this.toggleSelect}>toggle select all</button></p>
         <Gallery photos={this.state.photos} columns={this.props.columns} onClick={this.selectPhoto} ImageComponent={SelectedImage}/>
@@ -29,0 +29,0 @@ </div>

examples/src/ExampleWithLightbox.js

@@ -40,3 +40,3 @@ import React from 'react';
       <div>
-        <h2>Using a Lightbox:</h2>
+        <h2>Using with a Lightbox component</h2>
         <Gallery photos={this.props.photos} columns={this.props.columns} onClick={this.openLightbox}/>
@@ -43,0 +43,0 @@ <Lightbox

examples/src/SelectedImage.js

 import React from 'react';
+import Checkmark from './icons/checkmark';
 
@@ -15,3 +16,4 @@ const imgStyle = {
   overflow: 'hidden',
-  float: 'left'
+  float: 'left',
+  position: 'relative'
 }
@@ -24,7 +26,11 @@
   selectedImgStyle.transform = `translateZ(0px) scale3d(${sx}, ${sy}, 1)`;
-	return (<div style={{margin, width:photo.width, ...cont}} className={'cont' + (!photo.selected ? ' selected' : '')}>
-    <img style={photo.selected ? {...imgStyle, ...selectedImgStyle} : {...imgStyle}} {...photo} onClick={(e) => onClick(e, {index, photo})} />
-    <style>
-    {`.cont.selected:hover{outline:2px solid #06befa}`}
-    </style>
+	return (
+    <div style={{margin, width:photo.width, ...cont}} className={'cont' + (!photo.selected ? ' selected' : '')}>
+
+      <Checkmark selected={photo.selected ? true: false}/>
+      <img style={photo.selected ? {...imgStyle, ...selectedImgStyle} : {...imgStyle}} {...photo} onClick={(e) => onClick(e, {index, photo})} />
+
+      <style>
+      {`.cont.selected:hover{outline:2px solid #06befa}`}
+      </style>
     </div>
@@ -31,0 +37,0 @@ )

package.json

 {
   "name": "react-photo-gallery",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "Responsive React Photo Gallery Component",
@@ -5,0 +5,0 @@ "main": "lib/Gallery.js",

README.md

@@ -1,18 +0,13 @@
-<img src="https://sandygonzales.com/rpg-logo2.png" width="350" />
+<a href="http://neptunian.github.io/react-photo-gallery/"><img src="https://sandygonzales.com/rpg-logo2.png" width="350" /></a>
 
 [![Join the chat at https://gitter.im/react-photo-gallery/Lobby](https://badges.gitter.im/react-photo-gallery/Lobby.svg)](https://gitter.im/react-photo-gallery/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-* Stateless, responsive, and highly customizable
+## React Photo Gallery
+
+* Stateless, responsive, accessible, and highly customizable
 * Maintains the original aspect ratio of your photos
-* Supports srcset and sizes
-* Supports passing in a custom image component for implementation of things like image selection, favorites, captions, etc.
+* Uses actual image elements, optionally pass in srcset and sizes attributes
+* Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires!
 
-## Installation
 
-To install:
-
-```
-npm install --save react-photo-gallery
-```
-
 ## Examples
@@ -31,2 +26,10 @@
 
+## Installation
+
+To install:
+
+```
+npm install --save react-photo-gallery
+```
+
 ## Use
@@ -48,3 +51,3 @@
     src: 'http://example.com/example/img1.jpg',
-    srcset: [
+    srcSet: [
       'http://example.com/example/img1_1024.jpg 1024w',
@@ -51,0 +54,0 @@ 'http://example.com/example/img1_800.jpg 800w',

No alert changes

Improved metrics

Total package byte prevSize

4244006

increased by48.77%

Number of package files

39

increased by2.63%

Lines of code

66246

increased by9.23%

Number of lines in readme file

151

increased by2.03%

Number of low supply chain risk alerts

479

decreased by-44.94%

No dependency changes