Review Carousel Component

A reusable, responsive review carousel component for React applications.

Features

• Mobile-responsive design with swiper for small screens
• Automatic scrolling carousel for desktop
• Review detail modal
• Customizable colors and translations
• Fallback avatar generation for missing images
• TypeScript support

Installation

npm install nexo-solutions-review-carousel

Quick Start

import React from 'react';
import { ReviewCarousel } from 'nexo-solutions-review-carousel';

// IMPORTANT: Import required CSS files
import 'nexo-solutions-review-carousel/dist/index.css';
import 'swiper/css';
import 'swiper/css/pagination';

// Example component
function ReviewsSection() {
  const reviews = [
    {
      name: "John Doe",
      location: { en: "New York", pt: "Nova Iorque" },
      comment: { 
        en: "Great experience! The food was amazing.",
        pt: "Ótima experiência! A comida estava incrível."
      },
      rating: 5,
      image: "/images/john.jpg",
      sourceUrl: "https://maps.google.com/..."
    },
    // Add more reviews...
  ];

  return (
    <div className="reviews-section">
      <h2>Customer Reviews</h2>
      <ReviewCarousel 
        reviews={reviews}
        language="en"
        accentColor="#ff9900"
      />
    </div>
  );
}

Required Setup

1. Add Font Awesome to your HTML

   <link 
     rel="stylesheet" 
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" 
   />

2. Install peer dependencies

   Make sure you have the peer dependencies installed:

   npm install swiper

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | reviews | Review[] | Yes | Array of review objects | | language | string | Yes | Current language code (e.g., 'en', 'pt') | | accentColor | string | No | Custom color for stars and pagination bullets (default: '#ffc800') | | sourceIconUrl | string | No | Custom icon URL for review source (default: Google icon) | | onReviewClick | function | No | Custom handler for review click (if not provided, opens modal) | | translations | object | No | Custom text for UI elements |

Review Object Structure

interface Review {
  name: string;              // Reviewer name
  image: string;             // Reviewer avatar URL
  comment: {                 // Review content in different languages
    [key: string]: string;   // e.g., { en: "Great place!", pt: "Ótimo lugar!" }
  };
  location: {                // Reviewer location in different languages
    [key: string]: string;   // e.g., { en: "New York", pt: "Nova Iorque" }
  };
  rating: number;            // Star rating (1-5)
  sourceUrl?: string;        // Link to original review
  isLocalGuide?: boolean;    // Optional flag for local guides
}

Troubleshooting

• CSS not loading: Make sure you're importing all three required CSS files
• Icons not showing: Check that Font Awesome is properly loaded in your HTML
• Missing dependencies: Ensure swiper is installed in your project

Customization

You can customize the component by:

1. Modifying colors with the accentColor prop
2. Providing custom translations
3. Overriding the CSS with more specific selectors in your own stylesheet

License

MIT