mbn-react-google-reviews
Version:
Google Reviews Component which will bis in reactc component and is used by millions of developers
144 lines (66 loc) • 2.6 kB
Markdown
📦 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