📦 mbn-react-google-reviews

A clean, customizable React component library for displaying Google-style customer reviews — perfect for eCommerce, SaaS, service providers, and agencies.

🚀 Installation

npm install mbn-react-google-reviews

✨ Features

• 💅 Fully styled with Tailwind CSS

• 💬 Display reviews with avatars, star ratings, and animation

• 🎥 Smooth entrance animations via Framer Motion

• 🔌 Accepts static data or future Google Places API support

• 🧱 Developer-friendly props

• 🎯 Built for React & Next.js

🔧 Usage

Basic Example

import { GoogleReviewWidget } from "mbn-react-google-reviews";

const reviews = [ {

  author: "Mobin Hussaini",

  rating: 5,

  text: "Amazing quality and excellent support!",

  date: "June 29, 2025",

  avatar: "https://randomuser.me/api/portraits/men/75.jpg",

  },

];

export default function HomePage() {

return (

  <GoogleReviewWidget
     
     reviews={reviews}
     
     showTitle={true}
     
     ctaLabel="Leave your review"
     
     onCTAClick={() => alert("Redirect to Google review form")}
  
  />

);

}

🧩 Props

Prop Type Default Description reviews Review[] [] Array of reviews to display (required if no placeId)

placeId string undefined (Planned) Google Places place ID

apiKey string undefined (Planned) Google API Key

layout "grid" | "slider" "grid" Layout style — currently supports only grid

showTitle boolean true Whether to show the section title

titleText string "Customer Reviews" Title heading text

descriptionText string "Hear what our customers say..." Subheading text

ctaLabel string "Leave a Review" Label for CTA button

onCTAClick () => void undefined Action triggered when CTA is clicked

🧪 Review Object Structure

Each review should have:

type Review = {

author: string;

rating: number; // from 1 to 5

text: string;

date?: string;

avatar?: string; // optional image URL };

📘 Future Roadmap ✅ Publish to npm

🔜 Google Places API integration

🔜 Carousel layout using keen-slider or swiper

🔜 Dark mode support

🔜 Star filter & review analytics

🛠️ Requirements

React 18+

Tailwind CSS (or import index.css from the package manually)

Works with CRA, Vite, and Next.js

📝 License

MIT © 2025 Mohammad Mobin Hussaini