diff --git a/README.md b/README.md index 61afd88..b152c36 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,8 @@ Below you will find some information on how to perform common tasks.
- [License](#license) -## What's new `v0.1.5` -* Fixed key warning. +## What's new `v0.1.6` +* Added option to provide thumbnail. ## Demo @@ -38,19 +38,27 @@ yarn add react-fb-image-grid ## Basic Usage -``` +```jsx import FbImageLibrary from 'react-fb-image-grid' - + ``` +or +```jsx +import FbImageLibrary from 'react-fb-image-grid' + +``` ## Props Props | Type | Default | Example :--- | :---: | :---: | :--- -images | Array (String) | **required** | `{['https://some-url.com/image.jpg', importedImage]}` `//Local image should be imported first` -countFrom | Number | 5 | `{2}` `//Should be from 1 to 5` +images | **Array (String)**
OR
**Array (Object)** | **required** | `{['imgURL', 'imgURL', '...']}`
OR
`{[ {url: 'imgURL, thumbnail: 'thumbnailURL'}, {url, '...', thumbnail: '...'} ]}` +countFrom | Number | 5 | `{2}` - *Should be between 1 to 5* hideOverlay | Boolean | false | `{true}` renderOverlay | Function | `() => 'Preview Image'` | `{() => }` overlayBackgroundColor | String | `#222222` | `'green'` or `'#000000'` or `'rgb(255, 26, 26)'` diff --git a/demo/src/index.js b/demo/src/index.js index 49106b7..e6bfc42 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -3,20 +3,37 @@ import {render} from 'react-dom' import '../../src/css/style.css'; import FbImageLibrary from '../../src' -const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350', - 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg', - 'https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg', - 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg', - 'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350', - "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350", - "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"] +const images = [ + 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350', + 'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg', + 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350', + 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg', + 'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350', + 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350', + 'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000' +] + +const imgs = [ + { + url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg', + thumbnail: 'https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000' + }, + { + url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg' + }, + { + url: 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg' + } +] class Demo extends Component { - render() { - return
- -
+ render() { + return ( +
+ {/* images can be 'images' or 'imgs' */} + +
) } } -render(, document.querySelector('#demo')) +render(, document.querySelector('#demo')) diff --git a/package.json b/package.json index f421fef..56b7370 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-fb-image-grid", - "version": "0.1.5", + "version": "0.1.6", "description": "A beautifully featured image grid library for React which represents the images just like the facebook grid images with the count for extra as well", "main": "lib/index.js", "module": "es/index.js", diff --git a/src/components/Images.js b/src/components/Images.js index afe8509..bc8fdef 100644 --- a/src/components/Images.js +++ b/src/components/Images.js @@ -1,11 +1,10 @@ import React, { Component } from 'react'; -import { Image, Grid, Row, Col } from 'react-bootstrap'; +import { Grid, Row, Col } from 'react-bootstrap'; import Modal from './Modal' import PropTypes from 'prop-types'; class Images extends Component { static defaultProps = { - images: [], hideOverlay: false, renderOverlay: () => 'Preview Image', overlayBackgroundColor: '#222222', @@ -19,7 +18,9 @@ class Images extends Component { this.state = { modal: false, countFrom: props.countFrom > 0 && props.countFrom < 5 ? props.countFrom : 5, - conditionalRender: false + conditionalRender: false, + imageUrls: [], + thumbnails: [], }; this.openModal = this.openModal.bind(this); @@ -30,28 +31,57 @@ class Images extends Component { } } + componentDidMount() { + const {images} = this.props; + if(!images.length) return; + + const imageUrls = []; + const thumbnails = []; + + images.forEach(img => { + if(this.pureTypeOf(img) === 'object') { + imageUrls.push(img.url); + thumbnails.push(img.thumbnail || img.url); + } else { + imageUrls.push(img); + thumbnails.push(img); + } + + this.setState({ imageUrls, thumbnails }) + }) + } + + openModal(index) { - const {onClickEach, images} = this.props; + const {onClickEach} = this.props; + const {imageUrls} = this.state; if(onClickEach) { - return onClickEach({src: images[index], index}) + return onClickEach({src: imageUrls[index], index}) } - this.setState({modal: true, url: images[index], index}) + this.setState({modal: true, url: imageUrls[index], index}) } onClose() { this.setState({modal: false}) } + pureTypeOf = obj => { + return Object.prototype.toString + .call(obj) + .slice(8, -1) + .toLowerCase(); + }; + renderOne() { const {images} = this.props; - const {countFrom} = this.state; + const {countFrom, thumbnails} = this.state; const overlay = images.length > countFrom && countFrom == 1 ? this.renderCountOverlay(true) : this.renderOverlay(); return - + {overlay} @@ -60,16 +90,16 @@ class Images extends Component { renderTwo() { const {images} = this.props; - const {countFrom} = this.state; + const {countFrom, thumbnails} = this.state; const overlay = images.length > countFrom && [2, 3].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay(); const conditionalRender = [3, 4].includes(images.length) || images.length > +countFrom && [3, 4].includes(+countFrom); return - + {this.renderOverlay()} - + {overlay} @@ -78,19 +108,19 @@ class Images extends Component { renderThree(more) { const {images} = this.props; - const {countFrom} = this.state; + const {countFrom, thumbnails} = this.state; const overlay = !countFrom || countFrom > 5 || images.length > countFrom && [4, 5].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay(conditionalRender ? 3 : 4); const conditionalRender = images.length == 4 || images.length > +countFrom && +countFrom == 4; return - + {this.renderOverlay(conditionalRender ? 1 : 2)} - + {this.renderOverlay(conditionalRender ? 2 : 3)} - + {overlay} @@ -106,7 +136,7 @@ class Images extends Component { return [
, -
+
{renderOverlay()}
] @@ -121,7 +151,7 @@ class Images extends Component { } render(){ - const {modal, index, countFrom} = this.state; + const {modal, index, countFrom, imageUrls} = this.state; const {images} = this.props; const imagesToShow = [...images]; @@ -135,7 +165,7 @@ class Images extends Component { {imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()} {imagesToShow.length >= 4 && this.renderThree()} - {modal && } + {modal && }
) } @@ -143,7 +173,10 @@ class Images extends Component { } Images.propTypes = { - images: PropTypes.array.isRequired, + images: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string), + PropTypes.arrayOf(PropTypes.shape({ url: PropTypes.string.isRequired })), + ]).isRequired, hideOverlay: PropTypes.bool, renderOverlay: PropTypes.func, overlayBackgroundColor: PropTypes.string, @@ -151,4 +184,4 @@ Images.propTypes = { countFrom: PropTypes.number, }; -export default Images; \ No newline at end of file +export default Images;