@veeyaainnovatives/testimonials

A reusable Testimonials component with carousel/slider support for React applications.

Features

• 🎠 Carousel/Slider support with react-slick
• 🎨 Customizable navigation buttons
• 📱 Fully responsive design
• 🎯 Configurable slider settings
• 🔧 Flexible testimonial data structure
• 💅 Customizable styling

Installation

npm install @veeyaainnovatives/testimonials

Peer Dependencies

This package requires the following peer dependencies:

• react (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-dom (^16.8.0 || ^17.0.0 || ^18.0.0)
• react-bootstrap (^2.0.0)
• react-slick (^0.29.0)

Note: You also need to include react-slick CSS in your project:

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Usage

Basic Example

import { Testimonials } from '@veeyaainnovatives/testimonials';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function App() {
  const testimonials = [
    {
      testimonialID: "1",
      testimonialMsg: "Great service and excellent results!",
      testimonialName: "John Doe",
      testimonialDesignation: "CEO",
      testimonialImg: "/path/to/image.jpg"
    },
    {
      testimonialID: "2",
      testimonialMsg: "Highly recommended!",
      testimonialName: "Jane Smith",
      testimonialDesignation: "Manager",
      testimonialImg: "/path/to/image2.jpg"
    }
  ];

  return (
    <Testimonials 
      testimonials={testimonials}
      title="Our Happy Clients"
    />
  );
}

Advanced Example with Custom Settings

import { Testimonials } from '@veeyaainnovatives/testimonials';

function App() {
  const testimonials = [/* ... */];
  
  const customSliderSettings = {
    infinite: true,
    dots: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 3000
  };

  return (
    <Testimonials 
      testimonials={testimonials}
      title="Customer Reviews"
      testimonialIcon="/path/to/icon.png"
      defaultImage="/path/to/default-avatar.png"
      sliderSettings={customSliderSettings}
      className="custom-testimonials"
      showNavigation={true}
    />
  );
}

Note: The dots-related props (dotsTopImage, dotsBottomImage, dotsTopClassName, dotsBottomClassName) are optional and intended for internal use only. They are not required for basic usage.

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `testimonials` | `array` | Yes | `[]` | Array of testimonial objects |
| `testimonials[].testimonialMsg` | `string` | No | - | Testimonial message/text (also accepts `message` or `text`) |
| `testimonials[].testimonialImg` | `string` | No | - | Testimonial image URL (also accepts `image`) |
| `testimonials[].testimonialName` | `string` | No | - | Person's name (also accepts `name`) |
| `testimonials[].testimonialDesignation` | `string` | No | - | Person's designation (also accepts `designation` or `role`) |
| `testimonials[].testimonialID` | `string\|number` | No | - | Unique identifier (also accepts `id`) |
| `title` | `string` | No | `"Testimonials"` | Section title |
| `testimonialIcon` | `string` | No | - | Icon image URL (optional) |
| `defaultImage` | `string` | No | - | Default image if testimonial image is missing |
| `sliderSettings` | `object` | No | `{ infinite: true, dots: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, arrows: false }` | react-slick configuration |
| `className` | `string` | No | `''` | Additional CSS classes for container |
| `titleClassName` | `string` | No | `''` | Additional CSS classes for title |
| `renderCustomNav` | `function` | No | - | Custom navigation buttons render function |
| `showNavigation` | `boolean` | No | `true` | Show/hide navigation buttons |
| `dotsTopImage` | `string` | No | - | Top decorative dots image URL (optional, internal use) |
| `dotsBottomImage` | `string` | No | - | Bottom decorative dots image URL (optional, internal use) |
| `dotsTopClassName` | `string` | No | `''` | CSS classes for top dots styling (optional, internal use) |
| `dotsBottomClassName` | `string` | No | `''` | CSS classes for bottom dots styling (optional, internal use) |

## Testimonial Data Structure

The component accepts flexible data structures. You can use any of these field names:

**Option 1 (Original format):**
```js
{
  testimonialID: "1",
  testimonialMsg: "Message",
  testimonialName: "Name",
  testimonialDesignation: "Designation",
  testimonialImg: "/path/to/image.jpg"
}

Option 2 (Simplified format):

{
  id: "1",
  message: "Message",
  name: "Name",
  designation: "Role",
  image: "/path/to/image.jpg"
}

Styling

The component uses the following default CSS classes:

• .testimonial-design - Main container
• .testimonial-title - Title heading
• .testimonial-card - Individual testimonial card
• .testimonial-desc-section - Description section
• .testimonial-description - Testimonial text
• .testimonial-user - User info section
• .user-img - User image
• .user-name - User name
• .user-designation - User designation
• .testimonials-button - Navigation buttons
• .dots-top - Top decorative dots (when provided)
• .dots-bottom - Bottom decorative dots (when provided)

You can override these styles or add custom classes using the className props.

Note: Dots-related classes (.dots-top, .dots-bottom) are optional and for internal use only.

Custom Navigation

You can provide custom navigation buttons:

const renderCustomNav = ({ gotoPrev, gotoNext }) => (
  <>
    <button onClick={gotoPrev}>Previous</button>
    <button onClick={gotoNext}>Next</button>
  </>
);

<Testimonials 
  testimonials={testimonials}
  renderCustomNav={renderCustomNav}
/>

License

MIT

Author

Veeyaa Innovatives