Package Exports

nexo-solutions-review-carousel
nexo-solutions-review-carousel/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nexo-solutions-review-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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:

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

License

MIT