📦 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