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