react-google-reviews

React Google Reviews

Making adding Google reviews to any website beautiful, easy, and free!

Report a Bug - Request a Feature - Ask a Question

---

This React Google Reviews library is brought to you by Featurable, and the following documentation can also be found at https://featurable.com/docs/react-google-reviews

---

What is it? React component to display Google reviews on your website. This library is built with React and uses the Google Places API -or- the free Featurable API to fetch and display Google reviews on your website.

Documentation and examples at https://featurable.com/docs/react-google-reviews. Source code at https://github.com/ryanschiang/react-google-reviews.

Demo

Check out the live demo to see the React Google Reviews library in action.

Installation

Install it from npm:

npm install react-google-reviews

Usage

Using the Featurable API (recommended)

Prerequisites:

1. Create a 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)

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 the Google Place ID using the Place ID Finder

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

/**
 * Example using NextJS server component
 */
async function ReviewsPage() {
  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 (
    // Carousel and other layouts require wrapping ReactGoogleReviews in a client component
    <ReactGoogleReviews layout="badge" reviews={reviews} />
  );
}

export default ReviewsPage;

[!NOTE] The Google Places API only returns the 5 most recent reviews. If you need more reviews or want to customize which reviews are returned, consider using the free Featurable API.

Configuration

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} />

1. Carousel: An interactive carousel that displays reviews

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

1. 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

Prop	Type	Description
featurableId	string	Featurable widget ID
reviews	GoogleReview[]	Array of reviews to display, fetched using dangerouslyFetchPlaceReviews
layout	"badge" | "carousel" | "custom"	Layout of the reviews component
nameDisplay?	"fullNames" | "firstAndLastInitials" | "firstNamesOnly"	How to display names on reviews
logoVariant?	"logo" | "icon" | "none"	How to display the Google logo
maxCharacters?	number	When collapsed, the maximum number of characters to display in the review body
dateDisplay?	---	How to display the review date
reviewVariant?	---	Review layout variations
theme?	"light" | "dark"	Color scheme of the component
---	Carousel Props	---
carouselSpeed?	number	Autoplay speed of the carousel in milliseconds
carouselAutoplay?	boolean	Whether to autoplay the carousel
maxItems?	number	Maximum number of items to display at any one time in carousel
---	Badge Props	---
profileUrl?	string	Link to Google Business profile, if manually fetching reviews via Place API. Using Featurable API will automatically supply this URL.

License

This project is licensed under the MIT License - see the LICENSE file for details. 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.

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.