I published an image grid feature like Facebook uses to display pictures on a user’s wall for npm with React

In 2016, a client asked me to develop an image grid feature like Facebook uses to display pictures on a user’s wall.

The Facebook image grid has the following functionality:

  • If we have two pictures, those should be equally divided into two columns
  • For three pictures, there should be one in a row and two pictures in columns in another row.
  • For four pictures, there should be one in a row and three pictures in columns in another row.
  • For five pictures, two in the first row, three in the second row
  • For more than five, it should display an overlay presenting the counts of additional images

I first built this feature on Angular 1.x. Since that time, I have worked primarily on React. Recently, in September 2018, I thought it would be worthwhile to develop a component and publish it on npm for React so it would be easy for developers to use this feature in their own projects. I also had a few ideas for improvements to add in.

So, I developed a package and published it to npm called [react-fb-image-grid](https://github.com/Expertizo/react-fb-image-grid).

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()}

via GIPHY

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.