Implementing an Image Gallery using a React Library and Firebase

Andy Montalvo — Thu, 28 Jan 2021 04:30:31 +0000

If you’d prefer to watch rather than read: https://youtu.be/bG7tIR4QS10

Galleries are a popular way of integrating images into a web application. Image galleries let you add photos in rows and columns, allowing you to display more photos in less space while also making it easier for users to browse them.

In this article I will show you how to how to use an Image Gallery in a faster, easiest way, using React rainbow-modules library and Firebase. To accomplish this, you must have a general background in Javascript, React, Node.js, and Yarn.

What you will need

Node.js
Yarn
Your favorite IDE (I will use VSCode)

Add dependencies

For this project, I will use a new create-react-app project. If you want to know more and how to initialize a project, see: https://create-react-app.dev/.
After creating the project we proceed to the installation of the necessary dependencies.

yarn add react-intl react-redux react-router-dom redux redux-form
yarn add @rainbow-modules/app
yarn add @rainbow-modules/storage
yarn add react-rainbow-components
yarn add firebase

After installing the dependencies we are ready to code!

Coding

First of all, we should use the correct configuration to connect a Firebase project with our React application. Create a file named firebase.js inside the src folder where we will save the Firebase project configuration.

import firebase from 'firebase/app';
import 'firebase/storage';
const firebaseConfig = {
    apiKey: 'your apiKey',
    authDomain: 'your authDomain',
    projectId: 'your projectId',
    storageBucket: 'your storageBucket',
    messagingSenderId: 'your messagingSenderId',
    appId: 'your appId',
};
export default firebase.initializeApp(firebaseConfig);

Now that we have our configuration ready, we go to App.js and delete all its content. Now we import the dependencies into it.

import { RainbowFirebaseApp } from '@rainbow-modules/app';
import { ImageGallery } from '@rainbow-modules/storage';
import { Card } from 'react-rainbow-components';
import firebaseApp from './firebase';
import './App.css';

Next, let’s add the following code in the App component:

function App() {
    return (
        <RainbowFirebaseApp app={firebaseApp}>
            <div className="App">
                <Card>
                    <ImageGallery
                        path="/gallery"
                        allowUpload
                        allowDelete
                        onSelect={(imageRef) => {
                            alert(imageRef.name)
                        }}
                    />
                </Card>
            </div>
        </RainbowFirebaseApp>
    );
}
export default App;

With these few lines of code, we already have an image gallery working in our application. As we can see we must add a path prop with the path in the firebase storage where the images will be saved for the gallery to work.

Notice that the allowUpload and allowDelete props enable and disable the image Upload and Delete options. And with the onSelect prop we can execute some actions when a specific image is selected.

Styling

We will also add some simple styles to enhance the web application appearance. Go to the App.css file and remove all its content, and inside it, add the following code:

.App {
   min-height: 100vh;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

Now we save and reload, and we should see something like this:

Conclusion