caroulfoot

TypeScript Carousel Component

A comprehensive, fully-typed React carousel component with multiple layout options, built with TypeScript and Tailwind CSS.

Features

• 🎨 Multiple layout options (simple, product, CMS)
• 📱 Responsive design
• 🔧 Fully customizable
• 📝 Complete TypeScript support
• 🎯 Built-in editing capabilities
• 🔄 Smooth animations
• 📊 Built-in analytics utilities

Installation

npm install @your-username/typescript-carousel
# or
yarn add @your-username/typescript-carousel
# or
pnpm add @your-username/typescript-carousel

Quick Start

import React from 'react';
import { UniversalCarousel, CarouselSlide } from '@your-username/typescript-carousel';
import type { UniversalSlide } from '@your-username/typescript-carousel';

const App = () => {
  const slides: UniversalSlide[] = [
    {
      id: '1',
      title: "Sample Product",
      content: "This is a sample product description",
      image: "https://example.com/image.jpg",
      price: 29.99,
      currency: "$"
    },
    {
      id: '2',  
      title: "Blog Post",
      content: "Sample blog content...",
      author: "John Doe",
      publishDate: "2024-01-15",
      status: "published"
    }
  ];

  return (
    <UniversalCarousel
      slides={slides}
      layout="product"
      autoPlay={true}
      showControls={true}
    />
  );
};

export default App;

Components

UniversalCarousel

Main carousel container with full functionality.

CarouselSlide

Individual slide component that can be used standalone.

CarouselControls

Navigation controls for the carousel.

Modal & EditModal

Built-in modal components for editing slides.

Hooks

useCarousel

Main hook for carousel state management.

useCarouselScrolls

Hook for handling scroll-based navigation.

useSliderDetection

Hook for detecting slide interactions.

Types

interface UniversalSlide {
  id: string;
  title: string;
  content?: string;
  image?: string;
  
  // Product specific
  price?: number;
  currency?: string;
  inventory?: number;
  
  // CMS specific
  author?: string;
  publishDate?: string;
  status?: 'published' | 'draft' | 'archived';
}

Layout Types

• Simple: Basic image, title, and content
• Product: E-commerce focused with pricing
• CMS: Content management with author and dates

Styling

This component uses Tailwind CSS. Make sure Tailwind is installed in your project:

npm install tailwindcss

Requirements

• React 16.8+
• TypeScript 4.0+
• Tailwind CSS

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines first.

Support

If you find this helpful, please give it a ⭐ on GitHub!