expertizo/react-fb-image-grid

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

react-fb-image-grid

An image library that's used to show the images in beautiful grids.

Below you will find some information on how to perform common tasks.

Table of Contents

• What's new
• Installation
• Props
• Pull Requests
• License

What's new v0.1.5

• Fixed key warning.

Demo

Some Features Video

https://youtu.be/HdEhsDNkw6s

Installation

Run the following

npm install react-fb-image-grid

or

yarn add react-fb-image-grid

Basic Usage

import FbImageLibrary from 'react-fb-image-grid'

<FbImageLibrary images={[]}/>

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
hideOverlay	Boolean	false	{true}
renderOverlay	Function	() => 'Preview Image'	{() => <button>Show Image</button>}
overlayBackgroundColor	String	#222222	'green' or '#000000' or 'rgb(255, 26, 26)'
onClickEach	Function	null	{({src, index}) => {}}

Pull Requests

Feel free to make Pull Requests for your feature/fix. To run the project, run

npm install

or

yarn

then

npm start

License

MIT

react-fb-image-grid's Issues

style imported global, it breaking current css

Effect Of Library On UI

when I tried to use(import) the the library it effect my UI my very badly.

Note : I am using bootstrap library for the UI

this is the output without importing the library

this is the output after importing library

Responsiveness Issue

The library has issues in responsiveness with respect to zoom-in / zoom-out / changing width of the page inside the browser, the component/library doesn't respond to the page width while zooming in or out.

tried on Google Chrome
Version 69.0.3497.100 (Official Build) (64-bit)

Video Not Viewed

• Is there any way we can also view/play video in this grid?

Any way to access add className to the modal?

Any way to access the react modal? I want to customize the style of the modal, is there any way to add a class to the modal included in react-fb-image-grid? Thanks :)

Error style when build with webpack

When i use loader of webpack i get problem

The reason it does is because all URLs are rebased first and if you don't pass import as a url(...) then it does not get rebased, thus finds the file in the current folder.
You should replace to

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css');

Please resolve it for me. Thanks you

Iteration Key Error

Getting each child should have an own key in iteration warning.
Even if I'm using library alone without any other code.

node_modules/react-fb-image-grid/es/components/Modal.js

Error when importing

import FbImageLibrary from 'react-fb-image-grid'

it says

./node_modules/react-image-lightbox/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-fb-image-grid/es/components/Modal.js

i am using next.js

conflict with bootstrap button and modal (I use reactstrap).

It's awesome, but conflict with bootstrap button and modal (I use reactstrap).

No option for setting the height of images

There is not an option (props) to set the height of images, when I am using this library in Material UI CARD component it takes the 100% height and cannot be set by custom styling (CSS).
@kashifsulaiman

First one is without the card and the second one is inside the card component.

Grid not showing on small display

I've used this image grid on a PWA but as it's a small display, the images are not showing in the grid. The grid only shows on large screens.

Can anyone please tell me if I can show the images as the grid on small displays as well?

Thumbnails links to a full size image

Hi there,

First of all, thank you for a great lib.

Do you know if there is a possibility to use thumbnail links to generate a grid but clicking on it a full size image should be displayed?

I am using this scenario
Thumbnail: http://example.com/images/123_thumb.png
Full size image: http://example.com/images/123.png

Thanks in advance

update the old version of react-bootstrap to latest one

your module is good but it will be much better if you update it's dependencies like react-bootstrap to latest one so that it'll use latest bootstrap 4.4 as it conflicts with my bootstrap version (4.4) and destroy my react app styles