Develop & use Facbook gird image library

Malik Bilal
Dec 9, 2018 · 3 min read

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 also introduced some new logical features (props), you can check out the documentation here. 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

So firstly, 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 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 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()}

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 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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade