Google Pexel Photo Search Using ReactJS

Introduction

 

In this article, we will learn how to search images and vidoes from Google Pexel using its API in ReactJs. Anyone can download the images and the videos for free without any copyright issue.

 

The Pexels API provides a way to access all free videos and images from Google.

 

Prerequisites

• Basic knowledge of ReactJs
• Visual Studio Code must be installed
• Node JS must be installed

Google Pexel Image Search API

 

To get the Google Pexel API go to here.

 

 

Click on the Documentation where you can find the API there.

 

 

Get the API key.

 

To get the API key for image search click on the Authorization menu and you will find a direct link to get your API key. For that you need to login with your Google account.

 

 

Now API and authorization key are ready and it's time to create our React application. For that go to your project folder and create a React application.

 

Create ReactJs project

 

Step 1

 

Now create a new React.js project by using the following command.

npx create-react-app googleimagesearch

Step 2

 

Open the newly created project in Visual Studio code and install react bootstrap in this project by using the following command.

npm install react-bootstrap --save

Step 3

 

Now, open the index.js file and add import Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

Step 4

 

Now Install the Axios library by using the following command.

 

Axios is to get th http request coming from server. 

npm install --save axios

Step 5

 

Its time to add our app.js code by using the following command. 

import React from 'react'
import GooglePexel from "./googlePexel";

function App() {
  return (
    <GooglePexel></GooglePexel>
  )
}

export default App;

Step 6

 

Create a new file googlepexel.js and add our frontend code using the following command. 

import React, { useState } from "react";
import axios from 'axios';
import { Card } from 'react-bootstrap';
function googlePexel() {
    const [search, setSearch] = useState("");
    const [perPage, setPerPage] = useState("");
    const [result, setResult] = useState([]);

    function handleChange(event) {
        const search = event.target.value;
        setSearch(search);
    }
    function noOfPics(event) {
        const perPage = event.target.value;
        setPerPage(perPage);
    }

    function handleSubmit(event) {
        event.preventDefault();
        const url = "https://api.pexels.com/v1/search?query=" + search + "&per_page=" + perPage;
        const access_token = '563492ad6f917000010000014060d806c66c47b88b9b4d7f8c487692';
        axios.get(url, {
            headers: {
                'Authorization': `${access_token}`
            }
        }).then(data => {
            console.log(data);
            setResult(data.data.photos);
        })

    }
    return (
        <form onSubmit={handleSubmit}>
            <div className="card-header main-search">
                <div className="row">
                    <div className="col-12 col-md-3 col-xl-3">
                        <input onChange={handleChange} className="AutoFocus form-control" placeholder="Type something..." type="text" />
                    </div>
                    <div className="col-12 col-md-3 col-xl-3">
                        <input onChange={noOfPics} name="deliveryNumber" className="AutoFocus form-control" placeholder="No of Images"
                            type="text" />
                    </div>
                    <div className="ml-auto">
                        <input type="submit" value="Search" className="btn btn-primary search-btn" />
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    {result.map(search => (
                        <div className="col-sm-4">
                            <Card style={{ 'margin-top': '10px' }}>
                                <Card.Img variant="top" src={search.src.landscape} alt={search.photographer} />
                                <Card.Body>
                                    <h5 className="card-title">Card title</h5>
                                    <a className="btn btn-primary">Know more</a>
                                </Card.Body>
                            </Card>
                        </div>
                    ))}
                </div>
            </div>
        </form>
    )
}

export default googlePexel

 

Now we are done with all our coding part and it's time for the output.

 

In the below image we had searched for Bikes with 10 images.

 

 

In the below image we had searched for Mercedes with 100 images. 

 

 

In the below image we had searched for cars with 40 images. 

 

 

In the below image we searched for Laptops with 40 images.

 

 

Summary

 

In this article, we learned how to find any image using Google Pexel API.

 

Not only that, but we can also search the videos through Google Pexel API here.