React Google Reviews

The react-google-reviews library makes it easy to fetch and display Google reviews using ReactJS. The library is built on top of the Featurable API and provides a simple way to fetch and display Google reviews on your website. You can also use the Google Places API and your own API key instead of the Featurable API. In this guide we will show you how to get started with the react-google-reviews library.

Features

• Customizable: Choose from three layout options and customize the appearance of the reviews component
• SEO-friendly: Include JSON-LD structured data for search engines to index your reviews
• Responsive: Works on all devices and screen sizes
• Fast: Caches reviews for quick loading and improved performance
• Free: No cost to use the Featurable API for fetching reviews
• Fresh: Automatically updates with new reviews from Google every 24 hours (using Featurable API)
• Accessible: Built with accessibility in mind (WAI-ARIA compliant)
• Easy: Using the Featurable API, you can fetch reviews with just a few lines of code (no server-side code required)

Live Demo

Here is what the react-google-reviews component looks like when integrated into a React application:

Carousel layout

Badge layout

Installation

To get started with the react-google-reviews library, you need to install it using npm.

npm install react-google-reviews

Usage

There are two ways to use the React Google Reviews library: with the Featurable API or with the Google Places API. We recommend using the Featurable API for fetching reviews, as it provides more features, better performance, and is entirely free.

But if you prefer not to use the Featurable API, you can use the Google Places API with your own API key. This method is limited to fetching only the first 5 reviews from Google.

Using the Featurable API (recommended)

The Featurable API offers a free and easy method of using the <ReactGoogleReviews /> component. It requires no server-side code and automatically fetches new reviews from Google every 24 hours.

Using the Featurable API, you also do not need to find the Google Place ID, which can be especially helpful for businesses without a physical address.

Prerequisites:

1. Create your free Featurable account at https://featurable.com
2. Create a new Featurable widget and copy the widget ID

import { ReactGoogleReviews } from "react-google-reviews";
import "react-google-reviews/dist/index.css";

function Reviews() {
  // Create a free Featurable account at https://featurable.com
  // Then create a new Featurable widget and copy the widget ID
  const featurableWidgetId = "842ncdd8-0f40-438d-9c...";

  return (
    <ReactGoogleReviews layout="carousel" featurableId={featurableWidgetId} />
  );
}

Using the Google Places API (limited to 5 reviews)

If you prefer to use the Google Places API, you can fetch reviews using your own API key. This method is limited to fetching only the first 5 reviews from Google and requires server-side code to avoid exposing your API key.

Prerequisites:

1. Create a Google Cloud Platform account at https://cloud.google.com
2. Create a new project and enable the Google Places API (old version)
3. Find your business's Google Place ID using the Place ID Finder

import { ReactGoogleReviews, dangerouslyFetchPlaceReviews, ReactGoogleReview } from "react-google-reviews";
import "react-google-reviews/dist/index.css";

/**
 * Example using NextJS page router
 */
async function ReviewsPage({
  reviews
}, {
  reviews: ReactGoogleReview[]
}) {
  return (
    <ReactGoogleReviews layout="badge" reviews={reviews} />
  );
}

export default ReviewsPage;

export const getServerSideProps = async () => {
  const placeId = "ChIJN1t_tDeuEmsRU..."; // Google Place ID
  const apiKey = "AIzaSyD..."; // Google API Key

  // IMPORTANT: Only fetch reviews server-side to avoid exposing API key
  const reviews = await dangerouslyFetchPlaceReviews(placeId, apiKey)

  return {
    props: {
      reviews,
    }
  }
}

Configuration

The <ReactGoogleReviews /> component has a variety of configuration options and pre-built layouts. You can also pass a custom renderer function to customize the appearance of the reviews.

Layout

There are three layout options currently available:

1. Badge: Display a badge with the average rating, total reviews, and link to Google Business profile

 <ReactGoogleReviews layout="badge" featurableId={featurableWidgetId} />

2. Carousel: An interactive carousel that displays reviews

 <ReactGoogleReviews layout="carousel" featurableId={featurableWidgetId} />

3. Custom renderer: Render reviews using a custom function

<ReactGoogleReviews layout="custom" featurableId={featurableWidgetId} renderer={(reviews) => {
  return (
    <div>
      {reviews.map(({ reviewId, reviewer, comment }) => (
        <div key={reviewId}>
          <h3>{reviewer.displayName}</h3>
          <p>{comment}</p>
        </div>
      ))}
    </div>
  );
}} />

Props

The <ReactGoogleReviews /> component accepts the following props:

Common Props

Carousel Props

Badge Props

License

This project is licensed under the MIT License. By using the Featurable API, you agree to the Featurable Terms of Service.

Acknowledgements

This library uses slick-carousel and react-slick for the carousel layout.