Google Books Search Using Google Books Search API In ReactJS

Introduction

 

In this article, we will learn how to search for books and display them in our browser using Google books API in ReactJs.

 

Google books API provides a way to search for any book and gives a direct link to view it and buy it from Google.

 

Prerequisites

• Basic knowledge of React.js.
• Basic knowledge of Bootstrap and HTML
• Basic knowledge of React Hooks.
• Visual Studio Code must be installed.
• Node.js must be installed.

Google Book Search API

 

To get the url for Google books API go to here.

 

 

Click on View all developer products and it will redirect you to the products provided by Google for developers.

 

Search for Google Books API or you can scroll it down and click on B section. 

 

On the Home tab of it you can see there it's showing a category to get the information about the Google books repository, so click on Get started . 

 

 

Next it will redirect you to the dashboard in the Guides menu of the page so click on using the API menu on the left hand side to get the API.

 

 

Scroll down a bit down until you can see the API with API key.

 

 

You can check the response of it in our browser without API key it will give an error.

 

 

After providing the valid API key you can see its response coming from Google server in a json format.

 

JSON result gives you all the information of the books with its image url and author's name and its publisher's name etc.

 

 

Get the API key

 

To get the API key just follow the below steps.

 

On the home menu click on Google Api console you can redirect it to Google api console page where you can find the api key.

 

 

Here you have to create a new project. For this just follow the steps.

 

 

After that click on the credentials to get the API. 

 

 

Create ReactJS project

 

Step 1

 

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

npx create-react-app googlebooksearch

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 a lightweight HTTP client based on the $http service.

npm install --save axios

Step 5

 

It's time to add our app.js code by using the following command.

import React from 'react'
import './App.css';
import Country from './components/country';
import GoogleBooksSearch from "./googleBooksSearch";

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

export default App;

Step 6

 

Create a new file googlebooksearch.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 googleBooksSearch() {
    const [book, setBook] = useState("");
    const [result, setResult] = useState([]);
    const [apiKey, setApiKey] = useState("AIzaSyCqi37mzRrzkBrDZDb0BX9_IarX5iMOT88")

    function handleChange(event) {
        const book = event.target.value;
        setBook(book);
    }
    function handleSubmit(event) {
        event.preventDefault();
        axios.get("https://www.googleapis.com/books/v1/volumes?q=" + book + "&key=" + apiKey + "&maxResults=40")
            .then(data => {
                console.log(data.data.items);
                setResult(data.data.items);
            })
    }
    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="ml-auto">
                        <input type="submit" value="Search" className="btn btn-primary search-btn" />
                    </div>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    {result.map(book => (
                        <div className="col-sm-2">
                            <Card style={{ 'marginTop': '10px' }}>

                                <Card.Img variant="top" src={book.volumeInfo.imageLinks !== undefined ? book.volumeInfo.imageLinks.thumbnail : ''} alt={book.title} />
                                <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 googleBooksSearch

 

Using result.map keyword to bind all results in our react jsx which displays all the content in our browser. 

 

 

All our coding part is done now and it's time to see some output.

 

 

After getting the results then you can click on the Know more button, it will redirect to the Google books page where you can buy the ebook. 

 

 

Summary

 

This is my first article in Reactjs where we have learned how to search Google books using Google books API.

 

It's a simple reactJs project just to show you how we can get results from any third party API.

 

Thank you so much for reading my article.