Let me show you how to simply use this library and the features it has!

Install it

npm install react-fb-image-grid

or

yarn add react-fb-image-grid

Now?

Simply import the Component from the package and provide an images prop to that.

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



<FbImageLibrary images={[]}/>

For e.g. you have your images in the array.

import fakeImage from '../assets/images/fakeImage.jpg' const images = ['https://some-url.com/image.jpg', fakeImage ]

Just provide this images variable to the images prop.

render() {

return <FbImageLibrary images={images}/>

}

and then check out the user interface, it will work like charm. Try decreasing or increasing the images!

With this, I’ve also introduced some new logical features (props), you can check out the documentation here. I’m here explaining only a single prop that could be used in other scenarios. A prop countFrom that is used to tell the component to count the extra pictures from that number of picture. For instance, if somebody has multiple pictures, and he/she just wanna show the first one with the count of other remaining pictures just to show it’s an album consisting of multiple images. Let’s see how this is possible!

<FbImageLibrary images={images} countFrom={1}/>

In case of

<FbImageLibrary images={images} countFrom={3}/>

Finally, let me present you the logical code to develop this superstar feature (I’m just presenting the logic for the facebook griding logic, you can check out the whole source code from here)

So firstly, I created three methods in the component.

renderOne //return only a picture in a row

renderTwo //return two pictures in a row

renderThree //return three pictures in a row

then I rendered these methods on conditions

render(){

const { images } = this.props; return(

<div>

{[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}

{images.length >= 2 && images.length != 4 && this.renderTwo()}

{images.length >= 4 && this.renderThree()}

</div>

)

}

So you can see only three lines are used as basic logic, let me explain that how I thought about this?

A single image is to be presented in the condition when we have a total of 1 image or 3 or 4 images!

{[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}

Then I asked myself, where do we need two images in a single row, mind told me

When you have a total of 2 images.

When you have 3 images.

When you have 5 or more images.

But not for 4 images.

{images.length >= 2 && images.length != 4 && this.renderTwo()}

Then the same question I asked for 3 images in a single row, answer:

When you have 4 or more images.

{images.length >= 4 && this.renderThree()}

Haha, you might be wondering how simple the logic was.

Many times we’re trying to fix the thing in a harder way but it could be done easily by trying different ways of thinking!

Hope, this article might help you to develop the logic as well!

You can check out the demo video of usage of this library here.

Starting a new React project, or looking for a React developer?

Crowdbotics helps business build cool things with React (among other things). If you have a React project where you need additional developer resources, drop us a line. Crowdbotics can help you estimate build time for given product and feature specs, and provide specialized React developers as you need them.

If you’re building on your own with React, you can also use the Crowdbotics app builder to instantly scaffold and deploy React apps. Check it out.