DEV Community: Patrick Moore

Getting Started with Essential JS 2 Charts: Building Data Visualizations in React

Patrick Moore — Mon, 19 Jan 2026 17:49:19 +0000

Essential JS 2 Charts is a comprehensive charting library from Syncfusion for creating data visualizations in React applications. It provides a wide range of chart types including line, bar, pie, area, and more, with extensive customization options and interactive features. This guide walks through setting up and creating charts using Essential JS 2 Charts with React, from installation to a working implementation. This is part 70 of a series on using Essential JS 2 Charts with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install Essential JS 2 Charts using your preferred package manager:

npm install @syncfusion/ej2-react-charts

Or with yarn:

yarn add @syncfusion/ej2-react-charts

Or with pnpm:

pnpm add @syncfusion/ej2-react-charts

After installation, your package.json should include:

{
  "dependencies": {
    "@syncfusion/ej2-react-charts": "^20.0.0",
    "@syncfusion/ej2-base": "^20.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the required CSS files in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-react-charts/styles/material.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  LineSeries
} from '@syncfusion/ej2-react-charts';

function ChartExample() {
  const data = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 },
    { month: 'Jun', sales: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Line Chart Example</h2>
      <ChartComponent
        id="charts"
        primaryXAxis={{ valueType: 'Category' }}
        title="Monthly Sales"
      >
        <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={data}
            xName="month"
            yName="sales"
            type="Line"
          />
        </SeriesCollectionDirective>
      </ChartComponent>
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

Essential JS 2 Charts provides several key components:

ChartComponent: Main chart container
SeriesCollectionDirective: Container for chart series
SeriesDirective: Individual data series
Inject: Service injection for chart features
Chart types: Line, Column, Bar, Pie, Area, etc.
Features: Legend, Tooltip, DataLabel, Zoom, etc.

Key concepts:

Chart structure: ChartComponent contains SeriesCollectionDirective
Data source: Pass data through dataSource prop
Axis configuration: Configure X and Y axes
Series type: Specify chart type (Line, Column, etc.)
Services: Inject required services (Legend, Tooltip, etc.)

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  ColumnSeries,
  PieSeries
} from '@syncfusion/ej2-react-charts';

function MultipleChartsExample() {
  const columnData = [
    { month: 'Jan', sales: 35 },
    { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 },
    { month: 'Apr', sales: 32 }
  ];

  const pieData = [
    { x: 'Chrome', y: 37 },
    { x: 'Safari', y: 19 },
    { x: 'Firefox', y: 18 },
    { x: 'Edge', y: 12 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Column Chart</h3>
          <ChartComponent
            id="column-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Monthly Sales"
          >
            <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={columnData}
                xName="month"
                yName="sales"
                type="Column"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
        <div>
          <h3>Pie Chart</h3>
          <ChartComponent
            id="pie-chart"
            title="Browser Usage"
          >
            <Inject services={[PieSeries, Legend, Tooltip]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={pieData}
                xName="x"
                yName="y"
                type="Pie"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  LineSeries,
  ColumnSeries,
  AreaSeries
} from '@syncfusion/ej2-react-charts';

function DashboardCharts() {
  const salesData = [
    { month: 'Jan', sales: 35, target: 40 },
    { month: 'Feb', sales: 28, target: 35 },
    { month: 'Mar', sales: 34, target: 38 },
    { month: 'Apr', sales: 32, target: 36 },
    { month: 'May', sales: 40, target: 42 },
    { month: 'Jun', sales: 32, target: 38 }
  ];

  const revenueData = [
    { month: 'Q1', revenue: 12000 },
    { month: 'Q2', revenue: 15000 },
    { month: 'Q3', revenue: 18000 },
    { month: 'Q4', revenue: 20000 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        {/* Sales vs Target Chart */}
        <div>
          <h2>Sales vs Target</h2>
          <ChartComponent
            id="sales-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Monthly Sales Performance"
            legendSettings={{ visible: true }}
          >
            <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={salesData}
                xName="month"
                yName="sales"
                name="Sales"
                type="Line"
              />
              <SeriesDirective
                dataSource={salesData}
                xName="month"
                yName="target"
                name="Target"
                type="Line"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>

        {/* Revenue Chart */}
        <div>
          <h2>Quarterly Revenue</h2>
          <ChartComponent
            id="revenue-chart"
            primaryXAxis={{ valueType: 'Category' }}
            title="Quarterly Revenue"
            legendSettings={{ visible: true }}
          >
            <Inject services={[AreaSeries, Legend, Tooltip, DataLabel, Category]} />
            <SeriesCollectionDirective>
              <SeriesDirective
                dataSource={revenueData}
                xName="month"
                yName="revenue"
                type="Area"
              />
            </SeriesCollectionDirective>
          </ChartComponent>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import {
  ChartComponent,
  SeriesCollectionDirective,
  SeriesDirective,
  Inject,
  Legend,
  Category,
  Tooltip,
  DataLabel,
  ColumnSeries
} from '@syncfusion/ej2-react-charts';

function ProductComparisonChart() {
  const productData = [
    { product: 'Product A', q1: 120, q2: 135, q3: 150 },
    { product: 'Product B', q1: 100, q2: 110, q3: 125 },
    { product: 'Product C', q1: 90, q2: 95, q3: 105 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <ChartComponent
        id="product-chart"
        primaryXAxis={{ valueType: 'Category' }}
        title="Product Sales by Quarter"
        legendSettings={{ visible: true }}
      >
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q1"
            name="Q1"
            type="Column"
          />
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q2"
            name="Q2"
            type="Column"
          />
          <SeriesDirective
            dataSource={productData}
            xName="product"
            yName="q3"
            name="Q3"
            type="Column"
          />
        </SeriesCollectionDirective>
      </ChartComponent>
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Multiple series
Legend and tooltips
Custom styling
Data visualization

Common Issues / Troubleshooting

Chart not displaying: Make sure you've imported the CSS files. Essential JS 2 Charts requires CSS for proper rendering.
Services not working: Use the Inject component to inject required services. Each chart type and feature requires specific services.
Data not showing: Check that dataSource is properly formatted and that xName and yName match your data properties.
Axis not configured: Set primaryXAxis and primaryYAxis props. For category data, use valueType: 'Category'.
Styling issues: Import the theme CSS file. Available themes include 'material', 'fabric', 'bootstrap', etc.
Multiple series: Use multiple SeriesDirective components within SeriesCollectionDirective to display multiple series on the same chart.

Next Steps

Now that you have a basic understanding of Essential JS 2 Charts:

Explore all available chart types
Learn about advanced chart configurations
Implement interactive features (zoom, selection)
Add custom tooltips and labels
Create real-time updating charts
Learn about other chart libraries (recharts, chart.js)
Check the official documentation: https://ej2.syncfusion.com/react/documentation/chart/getting-started/

Summary

You've successfully set up Essential JS 2 Charts in your React application and created line charts, column charts, and dashboard visualizations. Essential JS 2 Charts provides a powerful solution for creating professional data visualizations with extensive customization options.

SEO Keywords

essential js 2 charts
React Syncfusion charts
essential js 2 charts tutorial
React data visualization
essential js 2 charts installation
React chart library
essential js 2 charts example
React line chart
essential js 2 charts setup
React bar chart
essential js 2 charts customization
React pie chart
essential js 2 charts dashboard
React chart component
essential js 2 charts getting started

Advanced Tab-Accordion Hybrid Components with react-tabbordion in React

Patrick Moore — Mon, 19 Jan 2026 17:48:11 +0000

react-tabbordion is a flexible library for creating hybrid tab-accordion components in React applications. It combines the functionality of tabs and accordions, automatically switching between tab and accordion layouts based on screen size, making it perfect for responsive designs. This guide walks through advanced usage of react-tabbordion with React, including responsive behavior, custom styling, and complex configurations. This is part 69 of a series on using react-tabbordion with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of responsive design principles

Installation

Install react-tabbordion using your preferred package manager:

npm install react-tabbordion

Or with yarn:

yarn add react-tabbordion

Or with pnpm:

pnpm add react-tabbordion

After installation, your package.json should include:

{
  "dependencies": {
    "react-tabbordion": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-tabbordion requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple tab-accordion. Create a new file src/TabbordionExample.jsx:

// src/TabbordionExample.jsx
import React from 'react';
import Tabbordion from 'react-tabbordion';

function TabbordionExample() {
  const items = [
    {
      label: 'Tab 1',
      panel: <div><p>Content for tab 1</p></div>
    },
    {
      label: 'Tab 2',
      panel: <div><p>Content for tab 2</p></div>
    },
    {
      label: 'Tab 3',
      panel: <div><p>Content for tab 3</p></div>
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Tabbordion Example</h2>
      <Tabbordion items={items} />
    </div>
  );
}

export default TabbordionExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import TabbordionExample from './TabbordionExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <TabbordionExample />
    </div>
  );
}

export default App;

This creates a basic tab-accordion that switches between tab and accordion layouts based on screen size.

Understanding the Basics

react-tabbordion provides a hybrid component:

Tabbordion component: Main component that switches between tabs and accordion
Responsive behavior: Automatically switches layout based on breakpoint
Items array: Array of objects with label and panel
Customizable: Configurable breakpoints and behavior
Accessible: Built-in accessibility features

Key concepts for advanced usage:

Items structure: Each item has a label and panel
Responsive breakpoint: Component switches at a configurable breakpoint
Tab mode: Horizontal tabs on larger screens
Accordion mode: Vertical accordion on smaller screens
State management: Component manages its own state

Here's an example with custom breakpoint and styling:

// src/AdvancedTabbordionExample.jsx
import React from 'react';
import Tabbordion from 'react-tabbordion';

function AdvancedTabbordionExample() {
  const items = [
    {
      label: 'Overview',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Overview</h3>
          <p>This is the overview content. It can contain any React components.</p>
        </div>
      )
    },
    {
      label: 'Details',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Details</h3>
          <p>This is the details content with more information.</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
        </div>
      )
    },
    {
      label: 'Settings',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Settings</h3>
          <p>Configure your settings here.</p>
        </div>
      )
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Advanced Tabbordion Example</h2>
      <Tabbordion
        items={items}
        mode="tabs"
        breakpoint={768}
      />
    </div>
  );
}

export default AdvancedTabbordionExample;

Practical Example / Building Something Real

Let's build a comprehensive product information component:

// src/ProductInfoTabbordion.jsx
import React, { useState } from 'react';
import Tabbordion from 'react-tabbordion';

function ProductInfoTabbordion() {
  const [activeTab, setActiveTab] = useState(0);

  const items = [
    {
      label: 'Description',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Product Description</h3>
          <p>
            This is a high-quality product designed for modern use. It features
            excellent build quality and comes with a comprehensive warranty.
          </p>
          <p>
            The product includes all necessary accessories and documentation
            to get you started right away.
          </p>
        </div>
      )
    },
    {
      label: 'Specifications',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Technical Specifications</h3>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <tbody>
              <tr style={{ borderBottom: '1px solid #ddd' }}>
                <td style={{ padding: '8px', fontWeight: 'bold' }}>Dimensions</td>
                <td style={{ padding: '8px' }}>10 x 8 x 2 inches</td>
              </tr>
              <tr style={{ borderBottom: '1px solid #ddd' }}>
                <td style={{ padding: '8px', fontWeight: 'bold' }}>Weight</td>
                <td style={{ padding: '8px' }}>1.5 lbs</td>
              </tr>
              <tr style={{ borderBottom: '1px solid #ddd' }}>
                <td style={{ padding: '8px', fontWeight: 'bold' }}>Material</td>
                <td style={{ padding: '8px' }}>Premium Quality</td>
              </tr>
              <tr>
                <td style={{ padding: '8px', fontWeight: 'bold' }}>Warranty</td>
                <td style={{ padding: '8px' }}>2 years</td>
              </tr>
            </tbody>
          </table>
        </div>
      )
    },
    {
      label: 'Reviews',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Customer Reviews</h3>
          <div style={{ marginBottom: '20px', padding: '15px', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
            <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>John Doe</div>
            <div style={{ color: '#666', marginBottom: '5px' }}>★★★★★</div>
            <p style={{ margin: 0 }}>Excellent product! Highly recommended.</p>
          </div>
          <div style={{ padding: '15px', backgroundColor: '#f8f9fa', borderRadius: '4px' }}>
            <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Jane Smith</div>
            <div style={{ color: '#666', marginBottom: '5px' }}>★★★★☆</div>
            <p style={{ margin: 0 }}>Good quality, fast shipping.</p>
          </div>
        </div>
      )
    },
    {
      label: 'Shipping',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Shipping Information</h3>
          <p>Free shipping on orders over $50.</p>
          <p>Standard shipping: 3-5 business days</p>
          <p>Express shipping: 1-2 business days (additional fee)</p>
        </div>
      )
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Product Information</h1>
      <Tabbordion
        items={items}
        mode="auto"
        breakpoint={768}
        onTabChange={(index) => setActiveTab(index)}
      />
    </div>
  );
}

export default ProductInfoTabbordion;

Now create a settings panel:

// src/SettingsTabbordion.jsx
import React, { useState } from 'react';
import Tabbordion from 'react-tabbordion';

function SettingsTabbordion() {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    analytics: true
  });

  const handleSettingChange = (key, value) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const items = [
    {
      label: 'General',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>General Settings</h3>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              checked={settings.darkMode}
              onChange={(e) => handleSettingChange('darkMode', e.target.checked)}
              style={{ marginRight: '8px' }}
            />
            Enable dark mode
          </label>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              checked={settings.analytics}
              onChange={(e) => handleSettingChange('analytics', e.target.checked)}
              style={{ marginRight: '8px' }}
            />
            Share analytics data
          </label>
        </div>
      )
    },
    {
      label: 'Notifications',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Notification Settings</h3>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              checked={settings.notifications}
              onChange={(e) => handleSettingChange('notifications', e.target.checked)}
              style={{ marginRight: '8px' }}
            />
            Enable notifications
          </label>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              style={{ marginRight: '8px' }}
            />
            Email notifications
          </label>
          <label style={{ display: 'block' }}>
            <input
              type="checkbox"
              style={{ marginRight: '8px' }}
            />
            Push notifications
          </label>
        </div>
      )
    },
    {
      label: 'Privacy',
      panel: (
        <div style={{ padding: '20px' }}>
          <h3>Privacy Settings</h3>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              style={{ marginRight: '8px' }}
            />
            Allow cookies
          </label>
          <label style={{ display: 'block', marginBottom: '15px' }}>
            <input
              type="checkbox"
              style={{ marginRight: '8px' }}
            />
            Share data with partners
          </label>
        </div>
      )
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Settings</h2>
      <Tabbordion
        items={items}
        mode="auto"
        breakpoint={640}
      />
    </div>
  );
}

export default SettingsTabbordion;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ProductInfoTabbordion from './ProductInfoTabbordion';
import SettingsTabbordion from './SettingsTabbordion';
import './App.css';

function App() {
  return (
    <div className="App">
      <ProductInfoTabbordion />
      <SettingsTabbordion />
    </div>
  );
}

export default App;

This example demonstrates:

Product information component
Settings panel with forms
Responsive behavior
Custom content in panels
State management
Event handling

Common Issues / Troubleshooting

Component not displaying: Make sure you're importing Tabbordion correctly from 'react-tabbordion'. Check that the items array is properly formatted.
Responsive not working: Set the breakpoint prop to control when the component switches between tab and accordion modes. The default breakpoint may need adjustment.
Items not showing: Ensure each item in the array has both label and panel properties. The panel should be a React element or component.
Mode not changing: Use mode="auto" for automatic switching, mode="tabs" for always tabs, or mode="accordion" for always accordion.
Styling issues: The component provides default styles. You can override them using CSS or by passing custom className props.
State management: The component manages its own state by default. Use onTabChange callback if you need to track the active tab externally.

Next Steps

Now that you have an advanced understanding of react-tabbordion:

Explore all available configuration options
Learn about custom styling and theming
Implement nested tabbordions
Add animations and transitions
Create custom breakpoints
Integrate with routing libraries
Learn about other tab/accordion libraries
Check the official repository: https://github.com/Merri/react-tabbordion

Summary

You've successfully integrated react-tabbordion into your React application with advanced features including responsive behavior, product information displays, and settings panels. react-tabbordion provides a flexible solution for creating hybrid tab-accordion components that adapt to different screen sizes.

SEO Keywords

react-tabbordion
React tab accordion
react-tabbordion tutorial
React responsive tabs
react-tabbordion installation
React hybrid component
react-tabbordion example
React tab accordion hybrid
react-tabbordion setup
React responsive UI
react-tabbordion customization
React tab component
react-tabbordion breakpoint
React accordion tabs
react-tabbordion getting started

Building Collapsible Content with react-collapse in React

Patrick Moore — Mon, 19 Jan 2026 17:46:05 +0000

react-collapse is a lightweight library for creating smooth, animated collapsible content in React applications. It provides a simple API for expanding and collapsing content with CSS transitions, making it easy to create accordions, expandable sections, and collapsible panels. This guide walks through setting up and creating collapsible content using react-collapse with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of CSS transitions

Installation

Install react-collapse using your preferred package manager:

npm install react-collapse

Or with yarn:

yarn add react-collapse

Or with pnpm:

pnpm add react-collapse

After installation, your package.json should include:

{
  "dependencies": {
    "react-collapse": "^5.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

react-collapse requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple collapsible section. Create a new file src/CollapseExample.jsx:

// src/CollapseExample.jsx
import React, { useState } from 'react';
import { Collapse } from 'react-collapse';

function CollapseExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Basic Collapse Example</h2>
      <button
        onClick={() => setIsOpen(!isOpen)}
        style={{
          padding: '10px 20px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer',
          marginBottom: '10px'
        }}
      >
        {isOpen ? 'Collapse' : 'Expand'}
      </button>
      <Collapse isOpened={isOpen}>
        <div style={{
          padding: '20px',
          backgroundColor: '#f8f9fa',
          border: '1px solid #ddd',
          borderRadius: '4px'
        }}>
          <p>This is collapsible content. It smoothly expands and collapses when you click the button.</p>
          <p>You can put any content here - text, images, forms, or other components.</p>
        </div>
      </Collapse>
    </div>
  );
}

export default CollapseExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import CollapseExample from './CollapseExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <CollapseExample />
    </div>
  );
}

export default App;

This creates a basic collapsible section with smooth animations.

Understanding the Basics

react-collapse provides a simple component:

Collapse component: Main collapsible container
isOpened prop: Controls whether content is expanded or collapsed
Smooth animations: CSS-based transitions
Flexible content: Can contain any React content
Customizable: Configurable transition timing

Key concepts:

State management: Use useState to control isOpened state
Toggle function: Create a function to toggle the state
Content wrapping: Wrap content in Collapse component
Animations: Transitions are handled automatically
Styling: Style the content as needed

Here's an example with multiple collapsible sections:

// src/AdvancedCollapseExample.jsx
import React, { useState } from 'react';
import { Collapse } from 'react-collapse';

function AdvancedCollapseExample() {
  const [openSections, setOpenSections] = useState({});

  const toggleSection = (id) => {
    setOpenSections(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const sections = [
    { id: 1, title: 'Section 1', content: 'Content for section 1' },
    { id: 2, title: 'Section 2', content: 'Content for section 2' },
    { id: 3, title: 'Section 3', content: 'Content for section 3' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Advanced Collapse Example</h2>
      {sections.map(section => (
        <div key={section.id} style={{ marginBottom: '10px' }}>
          <button
            onClick={() => toggleSection(section.id)}
            style={{
              width: '100%',
              padding: '10px 20px',
              backgroundColor: openSections[section.id] ? '#28a745' : '#007bff',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              textAlign: 'left'
            }}
          >
            {section.title} {openSections[section.id] ? '▼' : '▶'}
          </button>
          <Collapse isOpened={openSections[section.id]}>
            <div style={{
              padding: '15px',
              backgroundColor: '#f8f9fa',
              border: '1px solid #ddd',
              borderTop: 'none',
              borderRadius: '0 0 4px 4px'
            }}>
              <p>{section.content}</p>
            </div>
          </Collapse>
        </div>
      ))}
    </div>
  );
}

export default AdvancedCollapseExample;

Practical Example / Building Something Real

Let's build a comprehensive FAQ component with collapsible answers:

// src/FAQComponent.jsx
import React, { useState } from 'react';
import { Collapse } from 'react-collapse';

function FAQComponent() {
  const [openItems, setOpenItems] = useState({});

  const toggleItem = (id) => {
    setOpenItems(prev => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const faqItems = [
    {
      id: 1,
      question: 'How do I install react-collapse?',
      answer: 'You can install react-collapse using npm, yarn, or pnpm. Run: npm install react-collapse'
    },
    {
      id: 2,
      question: 'Is react-collapse accessible?',
      answer: 'react-collapse provides smooth animations but you may need to add ARIA attributes for full accessibility.'
    },
    {
      id: 3,
      question: 'Can I customize the animation?',
      answer: 'Yes, you can customize the animation timing and easing through CSS or by using the theme prop.'
    },
    {
      id: 4,
      question: 'Does it work with server-side rendering?',
      answer: 'Yes, react-collapse works with SSR. Make sure to handle the initial render state properly.'
    },
    {
      id: 5,
      question: 'Can I have multiple sections open at once?',
      answer: 'Yes, you can control multiple Collapse components independently using separate state variables.'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Frequently Asked Questions</h1>
      <div style={{ marginTop: '20px' }}>
        {faqItems.map(item => (
          <div key={item.id} style={{ marginBottom: '15px', border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
            <button
              onClick={() => toggleItem(item.id)}
              style={{
                width: '100%',
                padding: '15px 20px',
                backgroundColor: openItems[item.id] ? '#007bff' : '#f8f9fa',
                color: openItems[item.id] ? 'white' : '#333',
                border: 'none',
                cursor: 'pointer',
                textAlign: 'left',
                fontSize: '16px',
                fontWeight: '500',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                transition: 'background-color 0.3s'
              }}
            >
              <span>{item.question}</span>
              <span style={{ fontSize: '20px' }}>
                {openItems[item.id] ? '−' : '+'}
              </span>
            </button>
            <Collapse isOpened={openItems[item.id]}>
              <div style={{
                padding: '20px',
                backgroundColor: 'white',
                borderTop: '1px solid #ddd'
              }}>
                <p style={{ margin: 0, lineHeight: '1.6' }}>{item.answer}</p>
              </div>
            </Collapse>
          </div>
        ))}
      </div>
    </div>
  );
}

export default FAQComponent;

Now create a settings panel with collapsible sections:

// src/SettingsPanel.jsx
import React, { useState } from 'react';
import { Collapse } from 'react-collapse';

function SettingsPanel() {
  const [openSections, setOpenSections] = useState({
    general: false,
    privacy: false,
    notifications: false
  });

  const toggleSection = (section) => {
    setOpenSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Settings</h2>
      <div style={{ marginTop: '20px' }}>
        {/* General Settings */}
        <div style={{ marginBottom: '15px', border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
          <button
            onClick={() => toggleSection('general')}
            style={{
              width: '100%',
              padding: '15px 20px',
              backgroundColor: openSections.general ? '#007bff' : '#f8f9fa',
              color: openSections.general ? 'white' : '#333',
              border: 'none',
              cursor: 'pointer',
              textAlign: 'left',
              fontSize: '16px',
              fontWeight: '500'
            }}
          >
            General Settings {openSections.general ? '▼' : '▶'}
          </button>
          <Collapse isOpened={openSections.general}>
            <div style={{ padding: '20px', backgroundColor: 'white' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Enable dark mode
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Show notifications
              </label>
            </div>
          </Collapse>
        </div>

        {/* Privacy Settings */}
        <div style={{ marginBottom: '15px', border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
          <button
            onClick={() => toggleSection('privacy')}
            style={{
              width: '100%',
              padding: '15px 20px',
              backgroundColor: openSections.privacy ? '#007bff' : '#f8f9fa',
              color: openSections.privacy ? 'white' : '#333',
              border: 'none',
              cursor: 'pointer',
              textAlign: 'left',
              fontSize: '16px',
              fontWeight: '500'
            }}
          >
            Privacy Settings {openSections.privacy ? '▼' : '▶'}
          </button>
          <Collapse isOpened={openSections.privacy}>
            <div style={{ padding: '20px', backgroundColor: 'white' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Share analytics data
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Allow cookies
              </label>
            </div>
          </Collapse>
        </div>

        {/* Notification Settings */}
        <div style={{ marginBottom: '15px', border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden' }}>
          <button
            onClick={() => toggleSection('notifications')}
            style={{
              width: '100%',
              padding: '15px 20px',
              backgroundColor: openSections.notifications ? '#007bff' : '#f8f9fa',
              color: openSections.notifications ? 'white' : '#333',
              border: 'none',
              cursor: 'pointer',
              textAlign: 'left',
              fontSize: '16px',
              fontWeight: '500'
            }}
          >
            Notification Settings {openSections.notifications ? '▼' : '▶'}
          </button>
          <Collapse isOpened={openSections.notifications}>
            <div style={{ padding: '20px', backgroundColor: 'white' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Email notifications
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '8px' }} />
                Push notifications
              </label>
            </div>
          </Collapse>
        </div>
      </div>
    </div>
  );
}

export default SettingsPanel;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FAQComponent from './FAQComponent';
import SettingsPanel from './SettingsPanel';
import './App.css';

function App() {
  return (
    <div className="App">
      <FAQComponent />
      <SettingsPanel />
    </div>
  );
}

export default App;

This example demonstrates:

FAQ component with collapsible answers
Settings panel with multiple sections
Independent state management
Custom styling
Smooth animations

Common Issues / Troubleshooting

Content not collapsing: Make sure the isOpened prop is properly controlled by state. The component needs a boolean value to work correctly.
Animation not smooth: The library uses CSS transitions. If animations aren't smooth, check for CSS conflicts or ensure the component has proper dimensions.
Multiple sections not working: Use separate state variables or an object to manage multiple collapse states independently.
Content jumping: This can happen if the content height changes. Ensure the content has a stable structure or use fixed heights if needed.
Styling issues: The Collapse component wraps your content in a div. Make sure your styles account for this wrapper element.
Initial state: If you want a section to be open by default, set the initial state to true in your useState hook.

Next Steps

Now that you have an understanding of react-collapse:

Learn about advanced collapse configurations
Explore custom animation timing
Implement accordion behavior
Add accessibility features
Create nested collapsible sections
Learn about other collapse libraries
Check the official repository: https://github.com/nkbt/react-collapse

Summary

You've successfully set up react-collapse in your React application and created FAQ components and settings panels with smooth collapsible animations. react-collapse provides a simple, lightweight solution for creating expandable content sections.

SEO Keywords

react-collapse
React collapsible content
react-collapse tutorial
React expand collapse
react-collapse installation
React accordion component
react-collapse example
React collapse animation
react-collapse setup
React collapsible section
react-collapse customization
React collapse library
react-collapse FAQ
React smooth collapse
react-collapse getting started

Getting Started with React Accessible Accordion: Building Collapsible Content

Patrick Moore — Mon, 19 Jan 2026 17:44:40 +0000

React Accessible Accordion is a library for creating accessible, keyboard-navigable accordion components in React applications. It provides ARIA attributes, keyboard support, and smooth animations for creating collapsible content sections. This guide walks through setting up and creating accordions using React Accessible Accordion with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Accessible Accordion using your preferred package manager:

npm install react-accessible-accordion

Or with yarn:

yarn add react-accessible-accordion

Or with pnpm:

pnpm add react-accessible-accordion

After installation, your package.json should include:

{
  "dependencies": {
    "react-accessible-accordion": "^0.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Accessible Accordion requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple accordion. Create a new file src/AccordionExample.jsx:

// src/AccordionExample.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function AccordionExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Accordion Example</h2>
      <Accordion allowZeroExpanded>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              What is React?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              React is a JavaScript library for building user interfaces, particularly web applications.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              What is an Accordion?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              An accordion is a UI component that allows users to expand and collapse content sections.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton>
              Why use React Accessible Accordion?
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>
              React Accessible Accordion provides accessible, keyboard-navigable accordions with ARIA support.
            </p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default AccordionExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AccordionExample from './AccordionExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <AccordionExample />
    </div>
  );
}

export default App;

This creates a basic accordion with collapsible content sections.

Understanding the Basics

React Accessible Accordion uses a component-based structure:

Accordion: Main container component
AccordionItem: Individual accordion item
AccordionItemHeading: Header section
AccordionItemButton: Clickable button in header
AccordionItemPanel: Collapsible content panel
Accessibility: Built-in ARIA attributes and keyboard support

Key concepts:

Component structure: Accordion contains AccordionItems
Expansion: Items expand/collapse on click
Accessibility: Full keyboard navigation and screen reader support
Styling: Import CSS file for default styles
Configuration: Use props to control behavior

Here's an example with pre-expanded items:

// src/AdvancedAccordionExample.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function AdvancedAccordionExample() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Advanced Accordion Example</h2>
      <Accordion allowZeroExpanded allowMultipleExpanded preExpanded={[0]}>
        <AccordionItem uuid="item-1">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 1 (Pre-expanded)
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This section is pre-expanded when the component loads.</p>
            <p>You can have multiple paragraphs and content here.</p>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="item-2">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 2
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This is the content for section 2.</p>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
            </ul>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="item-3">
          <AccordionItemHeading>
            <AccordionItemButton>
              Section 3
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <p>This is the content for section 3.</p>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default AdvancedAccordionExample;

Practical Example / Building Something Real

Let's build a comprehensive FAQ accordion:

// src/FAQAccordion.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function FAQAccordion() {
  const faqItems = [
    {
      id: 'faq-1',
      question: 'How do I get started?',
      answer: 'To get started, install the library using npm or yarn, then import the components and start building your accordion.'
    },
    {
      id: 'faq-2',
      question: 'Is it accessible?',
      answer: 'Yes, React Accessible Accordion is fully accessible with ARIA attributes and keyboard navigation support.'
    },
    {
      id: 'faq-3',
      question: 'Can I customize the styling?',
      answer: 'Yes, you can customize the styling using CSS. The library provides default styles that you can override.'
    },
    {
      id: 'faq-4',
      question: 'Does it support multiple expanded items?',
      answer: 'Yes, you can enable multiple expanded items by setting the allowMultipleExpanded prop to true.'
    },
    {
      id: 'faq-5',
      question: 'Is it mobile-friendly?',
      answer: 'Yes, the accordion is responsive and works well on mobile devices with touch support.'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Frequently Asked Questions</h1>
      <Accordion allowZeroExpanded>
        {faqItems.map((item) => (
          <AccordionItem key={item.id} uuid={item.id}>
            <AccordionItemHeading>
              <AccordionItemButton>
                {item.question}
              </AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p>{item.answer}</p>
            </AccordionItemPanel>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}

export default FAQAccordion;

Now create a settings accordion:

// src/SettingsAccordion.jsx
import React from 'react';
import {
  Accordion,
  AccordionItem,
  AccordionItemHeading,
  AccordionItemButton,
  AccordionItemPanel
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';

function SettingsAccordion() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Settings</h2>
      <Accordion allowZeroExpanded allowMultipleExpanded>
        <AccordionItem uuid="general">
          <AccordionItemHeading>
            <AccordionItemButton>
              General Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Enable notifications
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Dark mode
              </label>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="privacy">
          <AccordionItemHeading>
            <AccordionItemButton>
              Privacy Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Share analytics data
              </label>
              <label style={{ display: 'block', marginBottom: '10px' }}>
                <input type="checkbox" style={{ marginRight: '5px' }} />
                Allow cookies
              </label>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem uuid="account">
          <AccordionItemHeading>
            <AccordionItemButton>
              Account Settings
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div style={{ padding: '20px' }}>
              <div style={{ marginBottom: '10px' }}>
                <label style={{ display: 'block', marginBottom: '4px' }}>
                  Email:
                </label>
                <input
                  type="email"
                  defaultValue="user@example.com"
                  style={{
                    width: '100%',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    boxSizing: 'border-box'
                  }}
                />
              </div>
              <button
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#007bff',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                Save Changes
              </button>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default SettingsAccordion;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import FAQAccordion from './FAQAccordion';
import SettingsAccordion from './SettingsAccordion';
import './App.css';

function App() {
  return (
    <div className="App">
      <FAQAccordion />
      <SettingsAccordion />
    </div>
  );
}

export default App;

This example demonstrates:

FAQ accordion
Settings accordion with forms
Multiple expanded items
Custom content in panels
Keyboard navigation
Accessible structure

Common Issues / Troubleshooting

Accordion not displaying: Make sure you've imported the CSS file (import 'react-accessible-accordion/dist/fancy-example.css'). The accordion requires styles to render correctly.
Items not expanding: Check that you're using the correct component structure. Each AccordionItem must contain AccordionItemHeading and AccordionItemPanel.
Multiple items not expanding: Set allowMultipleExpanded={true} on the Accordion component to allow multiple items to be expanded at once.
Pre-expanded not working: Use the preExpanded prop with an array of UUIDs or indices. Make sure the UUIDs match the uuid prop on AccordionItem.
Styling issues: Import the CSS file for default styles. You can override styles using CSS or by using a different CSS file provided by the library.
Keyboard navigation not working: Keyboard navigation is enabled by default. If it's not working, check for CSS conflicts or ensure the accordion is properly rendered.

Next Steps

Now that you have a basic understanding of React Accessible Accordion:

Learn about advanced accordion configurations
Explore custom styling options
Implement accordion state management
Add animations and transitions
Create nested accordions
Learn about other accordion libraries
Check the official repository: https://github.com/springload/react-accessible-accordion

Summary

You've successfully set up React Accessible Accordion in your React application and created FAQ and settings accordions with accessible, keyboard-navigable functionality. React Accessible Accordion provides a simple solution for creating accessible collapsible content sections.

SEO Keywords

react-accessible-accordion
React accordion component
react-accessible-accordion tutorial
React collapsible content
react-accessible-accordion installation
React accessible UI
react-accessible-accordion example
React FAQ accordion
react-accessible-accordion setup
React keyboard navigation
react-accessible-accordion customization
React ARIA accordion
react-accessible-accordion accessibility
React accordion library
react-accessible-accordion getting started

Advanced Reactive Buttons with reactive-button in React

Patrick Moore — Mon, 19 Jan 2026 17:43:42 +0000

reactive-button is a React button component library that provides reactive states and animations for buttons. It offers loading states, success/error feedback, and smooth transitions to create interactive button experiences. This guide walks through advanced usage of reactive-button with React, including state management, custom animations, and complex button configurations.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useCallback)
Familiarity with JavaScript/TypeScript
Understanding of async operations

Installation

Install reactive-button using your preferred package manager:

npm install reactive-button

Or with yarn:

yarn add reactive-button

Or with pnpm:

pnpm add reactive-button

After installation, your package.json should include:

{
  "dependencies": {
    "reactive-button": "^0.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

reactive-button requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple reactive button. Create a new file src/ReactiveButtonExample.jsx:

// src/ReactiveButtonExample.jsx
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function ReactiveButtonExample() {
  const [buttonState, setButtonState] = useState('idle');

  const handleClick = async () => {
    setButtonState('loading');
    // Simulate async operation
    await new Promise(resolve => setTimeout(resolve, 2000));
    setButtonState('success');
    setTimeout(() => setButtonState('idle'), 2000);
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Basic Reactive Button Example</h2>
      <ReactiveButton
        buttonState={buttonState}
        onClick={handleClick}
        color="primary"
        idleText="Click Me"
        loadingText="Loading..."
        successText="Success!"
        errorText="Error"
        shadow={true}
        rounded={true}
        size="medium"
      />
    </div>
  );
}

export default ReactiveButtonExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ReactiveButtonExample from './ReactiveButtonExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ReactiveButtonExample />
    </div>
  );
}

export default App;

This creates a reactive button with loading and success states.

Understanding the Basics

reactive-button provides several key features:

Button states: idle, loading, success, error
State management: Control button state programmatically
Custom text: Different text for each state
Animations: Smooth transitions between states
Styling: Customizable colors, sizes, and styles
Event handling: onClick handler for button actions

Key concepts for advanced usage:

State control: Use buttonState prop to control button state
State values: 'idle', 'loading', 'success', 'error'
Async operations: Handle async operations with state changes
Customization: Extensive styling and behavior options
Event handling: Use onClick for button actions

Here's an example with error handling:

// src/AdvancedReactiveButtonExample.jsx
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function AdvancedReactiveButtonExample() {
  const [buttonState, setButtonState] = useState('idle');
  const [shouldError, setShouldError] = useState(false);

  const handleClick = async () => {
    setButtonState('loading');
    try {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (shouldError) {
            reject(new Error('Operation failed'));
          } else {
            resolve();
          }
        }, 2000);
      });
      setButtonState('success');
      setTimeout(() => {
        setButtonState('idle');
        setShouldError(false);
      }, 2000);
    } catch (error) {
      setButtonState('error');
      setTimeout(() => {
        setButtonState('idle');
      }, 2000);
    }
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Advanced Reactive Button</h2>
      <div style={{ marginBottom: '20px' }}>
        <label>
          <input
            type="checkbox"
            checked={shouldError}
            onChange={(e) => setShouldError(e.target.checked)}
            style={{ marginRight: '5px' }}
          />
          Simulate Error
        </label>
      </div>
      <ReactiveButton
        buttonState={buttonState}
        onClick={handleClick}
        color="primary"
        idleText="Submit"
        loadingText="Processing..."
        successText="Success!"
        errorText="Failed"
        shadow={true}
        rounded={true}
        size="large"
        block={false}
      />
    </div>
  );
}

export default AdvancedReactiveButtonExample;

Practical Example / Building Something Real

Let's build a comprehensive button system with different use cases:

// src/ReactiveButtonSystem.jsx
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function ReactiveButtonSystem() {
  const [submitState, setSubmitState] = useState('idle');
  const [deleteState, setDeleteState] = useState('idle');
  const [downloadState, setDownloadState] = useState('idle');
  const [saveState, setSaveState] = useState('idle');

  const handleSubmit = async () => {
    setSubmitState('loading');
    await new Promise(resolve => setTimeout(resolve, 2000));
    setSubmitState('success');
    setTimeout(() => setSubmitState('idle'), 2000);
  };

  const handleDelete = async () => {
    if (!confirm('Are you sure you want to delete?')) return;
    setDeleteState('loading');
    await new Promise(resolve => setTimeout(resolve, 1500));
    setDeleteState('success');
    setTimeout(() => setDeleteState('idle'), 2000);
  };

  const handleDownload = async () => {
    setDownloadState('loading');
    await new Promise(resolve => setTimeout(resolve, 2500));
    setDownloadState('success');
    setTimeout(() => setDownloadState('idle'), 2000);
  };

  const handleSave = async () => {
    setSaveState('loading');
    await new Promise(resolve => setTimeout(resolve, 1000));
    setSaveState('success');
    setTimeout(() => setSaveState('idle'), 2000);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Reactive Button System</h1>

      {/* Form Buttons */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Form Buttons</h2>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <ReactiveButton
            buttonState={submitState}
            onClick={handleSubmit}
            color="primary"
            idleText="Submit"
            loadingText="Submitting..."
            successText="Submitted!"
            shadow={true}
            rounded={true}
          />
          <ReactiveButton
            buttonState={saveState}
            onClick={handleSave}
            color="secondary"
            idleText="Save"
            loadingText="Saving..."
            successText="Saved!"
            shadow={true}
            rounded={true}
          />
        </div>
      </section>

      {/* Action Buttons */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Action Buttons</h2>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <ReactiveButton
            buttonState={downloadState}
            onClick={handleDownload}
            color="primary"
            idleText="Download"
            loadingText="Downloading..."
            successText="Downloaded!"
            shadow={true}
            rounded={true}
          />
          <ReactiveButton
            buttonState={deleteState}
            onClick={handleDelete}
            color="red"
            idleText="Delete"
            loadingText="Deleting..."
            successText="Deleted!"
            shadow={true}
            rounded={true}
          />
        </div>
      </section>

      {/* Size Variations */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Size Variations</h2>
        <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
          <ReactiveButton
            buttonState="idle"
            onClick={() => alert('Small clicked')}
            color="primary"
            idleText="Small"
            size="small"
            shadow={true}
            rounded={true}
          />
          <ReactiveButton
            buttonState="idle"
            onClick={() => alert('Medium clicked')}
            color="primary"
            idleText="Medium"
            size="medium"
            shadow={true}
            rounded={true}
          />
          <ReactiveButton
            buttonState="idle"
            onClick={() => alert('Large clicked')}
            color="primary"
            idleText="Large"
            size="large"
            shadow={true}
            rounded={true}
          />
        </div>
      </section>
    </div>
  );
}

export default ReactiveButtonSystem;

Now create a form with reactive buttons:

// src/FormWithReactiveButtons.jsx
import React, { useState } from 'react';
import ReactiveButton from 'reactive-button';

function FormWithReactiveButtons() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [submitState, setSubmitState] = useState('idle');
  const [resetState, setResetState] = useState('idle');

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async () => {
    setSubmitState('loading');
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
      setSubmitState('success');
      setFormData({ name: '', email: '' });
      setTimeout(() => setSubmitState('idle'), 2000);
    } catch (error) {
      setSubmitState('error');
      setTimeout(() => setSubmitState('idle'), 2000);
    }
  };

  const handleReset = async () => {
    setResetState('loading');
    await new Promise(resolve => setTimeout(resolve, 500));
    setFormData({ name: '', email: '' });
    setResetState('success');
    setTimeout(() => setResetState('idle'), 1000);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>Form with Reactive Buttons</h2>
      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Name:
          </label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            required
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
        </div>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Email:
          </label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
        </div>
        <div style={{ display: 'flex', gap: '10px' }}>
          <ReactiveButton
            buttonState={submitState}
            onClick={handleSubmit}
            color="primary"
            idleText="Submit"
            loadingText="Submitting..."
            successText="Submitted!"
            errorText="Error"
            shadow={true}
            rounded={true}
            block={false}
          />
          <ReactiveButton
            buttonState={resetState}
            onClick={handleReset}
            color="secondary"
            idleText="Reset"
            loadingText="Resetting..."
            successText="Reset!"
            shadow={true}
            rounded={true}
            block={false}
          />
        </div>
      </form>
    </div>
  );
}

export default FormWithReactiveButtons;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ReactiveButtonSystem from './ReactiveButtonSystem';
import FormWithReactiveButtons from './FormWithReactiveButtons';
import './App.css';

function App() {
  return (
    <div className="App">
      <ReactiveButtonSystem />
      <FormWithReactiveButtons />
    </div>
  );
}

export default App;

This example demonstrates:

Different button states
Error handling
Form integration
Size variations
Multiple button instances
Async operations
State management

Common Issues / Troubleshooting

Button not displaying: Make sure you're importing ReactiveButton correctly. The component should be imported from 'reactive-button'.
State not changing: Ensure you're managing the buttonState in your component using useState. The state should be one of: 'idle', 'loading', 'success', 'error'.
Loading state not showing: Set buttonState to 'loading' before the async operation and change it to 'success' or 'error' after completion.
Click not working: Use onClick prop for event handling. Make sure the handler is properly defined and doesn't prevent default behavior if needed.
Styling issues: Use the color, size, shadow, and rounded props to customize appearance. Available colors include 'primary', 'secondary', 'red', etc.
State not resetting: After showing success or error state, use setTimeout to reset the state back to 'idle' after a delay.

Next Steps

Now that you have an advanced understanding of reactive-button:

Explore all available button colors and styles
Learn about advanced state management patterns
Implement button groups and toolbars
Add custom animations
Create button themes
Integrate with form libraries
Learn about other button libraries
Check the official repository: https://github.com/arifszn/reactive-button

Summary

You've successfully integrated reactive-button into your React application with advanced features including state management, error handling, form integration, and multiple button configurations. reactive-button provides a simple solution for creating reactive buttons with smooth state transitions and visual feedback.

SEO Keywords

reactive-button
React reactive button
reactive-button tutorial
React button states
reactive-button installation
React loading button
reactive-button example
React button component
reactive-button setup
React interactive button
reactive-button customization
React button library
reactive-button states
React button animations
reactive-button getting started

Building Animated Buttons with react-awesome-button in React

Patrick Moore — Mon, 19 Jan 2026 17:41:52 +0000

react-awesome-button is a library for creating animated, interactive buttons in React applications. It provides various button styles, animations, and states to create engaging user interfaces with smooth transitions and visual feedback. This guide walks through setting up and creating animated buttons using react-awesome-button with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript
Understanding of CSS animations

Installation

Install react-awesome-button and required CSS:

npm install react-awesome-button

Or with yarn:

yarn add react-awesome-button

Or with pnpm:

pnpm add react-awesome-button

After installation, your package.json should include:

{
  "dependencies": {
    "react-awesome-button": "^6.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the CSS file in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-awesome-button/dist/styles.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple animated button. Create a new file src/ButtonExample.jsx:

// src/ButtonExample.jsx
import React from 'react';
import AwesomeButton from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';

function ButtonExample() {
  const handleClick = () => {
    console.log('Button clicked!');
    alert('Button clicked!');
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Basic Awesome Button Example</h2>
      <AwesomeButton
        type="primary"
        onPress={handleClick}
      >
        Click Me
      </AwesomeButton>
    </div>
  );
}

export default ButtonExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ButtonExample from './ButtonExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ButtonExample />
    </div>
  );
}

export default App;

This creates a basic animated button with click handling.

Understanding the Basics

react-awesome-button provides several button types and features:

Button types: primary, secondary, link, etc.
Animations: Various animation effects
States: Loading, disabled, success states
Sizes: Different button sizes
Icons: Support for icons
Customization: Extensive styling options

Key concepts:

Button types: Use type prop to set button style
Event handling: Use onPress for click events
States: Control button state with props
Animations: Built-in animation effects
Styling: Customize with CSS or props

Here's an example with different button types and states:

// src/AdvancedButtonExample.jsx
import React, { useState } from 'react';
import AwesomeButton from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';

function AdvancedButtonExample() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const handleAsyncAction = async () => {
    setLoading(true);
    setSuccess(false);
    // Simulate async operation
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
    setSuccess(true);
    setTimeout(() => setSuccess(false), 2000);
  };

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Advanced Button Examples</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '300px', margin: '0 auto' }}>
        <AwesomeButton type="primary" onPress={() => alert('Primary clicked')}>
          Primary Button
        </AwesomeButton>
        <AwesomeButton type="secondary" onPress={() => alert('Secondary clicked')}>
          Secondary Button
        </AwesomeButton>
        <AwesomeButton type="link" onPress={() => alert('Link clicked')}>
          Link Button
        </AwesomeButton>
        <AwesomeButton
          type="primary"
          loading={loading}
          disabled={loading}
          onPress={handleAsyncAction}
        >
          {success ? 'Success!' : 'Async Action'}
        </AwesomeButton>
      </div>
    </div>
  );
}

export default AdvancedButtonExample;

Practical Example / Building Something Real

Let's build a comprehensive button system with different use cases:

// src/ButtonSystem.jsx
import React, { useState } from 'react';
import AwesomeButton from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';

function ButtonSystem() {
  const [submitLoading, setSubmitLoading] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [downloadLoading, setDownloadLoading] = useState(false);

  const handleSubmit = async () => {
    setSubmitLoading(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    setSubmitLoading(false);
    alert('Form submitted successfully!');
  };

  const handleDelete = async () => {
    if (!confirm('Are you sure you want to delete?')) return;
    setDeleteLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1500));
    setDeleteLoading(false);
    alert('Item deleted!');
  };

  const handleDownload = async () => {
    setDownloadLoading(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    setDownloadLoading(false);
    alert('Download complete!');
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>Button System Examples</h1>

      {/* Form Buttons */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Form Buttons</h2>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <AwesomeButton
            type="primary"
            loading={submitLoading}
            disabled={submitLoading}
            onPress={handleSubmit}
          >
            Submit
          </AwesomeButton>
          <AwesomeButton
            type="secondary"
            onPress={() => alert('Cancel clicked')}
          >
            Cancel
          </AwesomeButton>
          <AwesomeButton
            type="link"
            onPress={() => alert('Reset clicked')}
          >
            Reset
          </AwesomeButton>
        </div>
      </section>

      {/* Action Buttons */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Action Buttons</h2>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <AwesomeButton
            type="primary"
            loading={downloadLoading}
            disabled={downloadLoading}
            onPress={handleDownload}
          >
            Download
          </AwesomeButton>
          <AwesomeButton
            type="secondary"
            onPress={() => alert('Share clicked')}
          >
            Share
          </AwesomeButton>
          <AwesomeButton
            type="primary"
            loading={deleteLoading}
            disabled={deleteLoading}
            onPress={handleDelete}
            cssModule={{
              button: 'custom-danger-button'
            }}
          >
            Delete
          </AwesomeButton>
        </div>
      </section>

      {/* Size Variations */}
      <section style={{ marginBottom: '40px', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>
        <h2>Size Variations</h2>
        <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
          <AwesomeButton type="primary" size="small" onPress={() => alert('Small clicked')}>
            Small
          </AwesomeButton>
          <AwesomeButton type="primary" size="medium" onPress={() => alert('Medium clicked')}>
            Medium
          </AwesomeButton>
          <AwesomeButton type="primary" size="large" onPress={() => alert('Large clicked')}>
            Large
          </AwesomeButton>
        </div>
      </section>
    </div>
  );
}

export default ButtonSystem;

Add custom styles in App.css:

/* src/App.css */
.custom-danger-button {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.custom-danger-button:hover {
  background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

Now create a form with button states:

// src/FormWithButtons.jsx
import React, { useState } from 'react';
import AwesomeButton from 'react-awesome-button';
import 'react-awesome-button/dist/styles.css';

function FormWithButtons() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitSuccess(false);

    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));

    setIsSubmitting(false);
    setSubmitSuccess(true);
    setFormData({ name: '', email: '' });

    setTimeout(() => setSubmitSuccess(false), 3000);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h2>Form with Awesome Buttons</h2>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Name:
          </label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            required
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
        </div>
        <div style={{ marginBottom: '16px' }}>
          <label style={{ display: 'block', marginBottom: '4px', fontWeight: '500' }}>
            Email:
          </label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
            style={{
              width: '100%',
              padding: '8px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
        </div>
        <div style={{ display: 'flex', gap: '10px' }}>
          <AwesomeButton
            type="primary"
            loading={isSubmitting}
            disabled={isSubmitting || submitSuccess}
            onPress={handleSubmit}
          >
            {submitSuccess ? 'Submitted!' : 'Submit'}
          </AwesomeButton>
          <AwesomeButton
            type="secondary"
            disabled={isSubmitting}
            onPress={() => setFormData({ name: '', email: '' })}
          >
            Clear
          </AwesomeButton>
        </div>
      </form>
    </div>
  );
}

export default FormWithButtons;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ButtonSystem from './ButtonSystem';
import FormWithButtons from './FormWithButtons';
import './App.css';

function App() {
  return (
    <div className="App">
      <ButtonSystem />
      <FormWithButtons />
    </div>
  );
}

export default App;

This example demonstrates:

Different button types
Loading states
Success states
Form integration
Size variations
Custom styling
Async operations

Common Issues / Troubleshooting

Button not displaying: Make sure you've imported the CSS file (import 'react-awesome-button/dist/styles.css'). The button requires styles to render correctly.
Animations not working: Check that the CSS is properly imported. Animations are handled by the CSS file, so ensure it's loaded.
Loading state not showing: Use the loading prop to show loading state. Make sure you're managing the loading state in your component.
Click not working: Use onPress prop instead of onClick. The library uses onPress for event handling.
Styling conflicts: Use the cssModule prop to apply custom CSS classes. You can override default styles using CSS.
Button types: Available types include primary, secondary, link, etc. Check the documentation for all available types.

Next Steps

Now that you have an understanding of react-awesome-button:

Explore all available button types and animations
Learn about advanced customization options
Implement button groups and toolbars
Add icons to buttons
Create custom button themes
Learn about other button libraries
Check the official repository: https://github.com/rcaferati/react-awesome-button

Summary

You've successfully set up react-awesome-button in your React application and created animated buttons with different types, states, and use cases. react-awesome-button provides an easy way to create engaging, animated buttons with smooth transitions and visual feedback.

SEO Keywords

react-awesome-button
React animated button
react-awesome-button tutorial
React button component
react-awesome-button installation
React interactive button
react-awesome-button example
React button library
react-awesome-button setup
React button animations
react-awesome-button customization
React button states
react-awesome-button loading
React button styles
react-awesome-button getting started

Getting Started with Swiper: Building Image Carousels in React

Patrick Moore — Mon, 19 Jan 2026 17:40:21 +0000

Swiper is a modern, touch-enabled slider and carousel library for React applications. It provides smooth animations, touch gestures, navigation controls, and extensive customization options for creating professional image galleries and content sliders. This guide walks through setting up and creating carousels using Swiper with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install Swiper using your preferred package manager:

npm install swiper

Or with yarn:

yarn add swiper

Or with pnpm:

pnpm add swiper

After installation, your package.json should include:

{
  "dependencies": {
    "swiper": "^11.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the CSS file in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'swiper/css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple image carousel. Create a new file src/SwiperExample.jsx:

// src/SwiperExample.jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function SwiperExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Swiper Example</h2>
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}
      >
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '400px', objectFit: 'cover' }}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default SwiperExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import SwiperExample from './SwiperExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <SwiperExample />
    </div>
  );
}

export default App;

This creates a basic carousel with touch support and navigation.

Understanding the Basics

Swiper provides React components:

Swiper: Main slider container component
SwiperSlide: Individual slide component
Modules: Navigation, Pagination, Scrollbar, etc.
CSS imports: Import styles for modules you use
Touch support: Built-in swipe gestures
Responsive: Automatic responsive behavior

Key concepts:

Components: Use Swiper and SwiperSlide components
Props: Configure behavior through props
Modules: Import and use modules for additional features
Styling: Import CSS for each module you use
Event handlers: Use onSlideChange, onSwiper callbacks

Here's an example with navigation and pagination:

// src/AdvancedSwiperExample.jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

function AdvancedSwiperExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Advanced Swiper with Navigation</h2>
      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={50}
        slidesPerView={1}
        navigation
        pagination={{ clickable: true }}
        onSlideChange={() => console.log('slide change')}
      >
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '400px', objectFit: 'cover' }}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default AdvancedSwiperExample;

Practical Example / Building Something Real

Let's build a comprehensive image gallery with navigation and thumbnails:

// src/ImageGallerySwiper.jsx
import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Thumbs } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/thumbs';

function ImageGallerySwiper() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  const images = [
    {
      full: 'https://via.placeholder.com/1200x800/007bff/ffffff?text=Image+1',
      thumb: 'https://via.placeholder.com/150x100/007bff/ffffff?text=1',
      title: 'Image 1'
    },
    {
      full: 'https://via.placeholder.com/1200x800/28a745/ffffff?text=Image+2',
      thumb: 'https://via.placeholder.com/150x100/28a745/ffffff?text=2',
      title: 'Image 2'
    },
    {
      full: 'https://via.placeholder.com/1200x800/ffc107/000000?text=Image+3',
      thumb: 'https://via.placeholder.com/150x100/ffc107/000000?text=3',
      title: 'Image 3'
    },
    {
      full: 'https://via.placeholder.com/1200x800/dc3545/ffffff?text=Image+4',
      thumb: 'https://via.placeholder.com/150x100/dc3545/ffffff?text=4',
      title: 'Image 4'
    },
    {
      full: 'https://via.placeholder.com/1200x800/6c757d/ffffff?text=Image+5',
      thumb: 'https://via.placeholder.com/150x100/6c757d/ffffff?text=5',
      title: 'Image 5'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Image Gallery with Swiper</h1>
      <div style={{ marginBottom: '20px' }}>
        <Swiper
          modules={[Navigation, Pagination, Thumbs]}
          spaceBetween={10}
          navigation
          pagination={{ clickable: true }}
          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
        >
          {images.map((image, index) => (
            <SwiperSlide key={index}>
              <img
                src={image.full}
                alt={image.title}
                style={{
                  width: '100%',
                  height: '600px',
                  objectFit: 'cover',
                  borderRadius: '8px'
                }}
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <Swiper
        onSwiper={setThumbsSwiper}
        modules={[Thumbs]}
        spaceBetween={10}
        slidesPerView={4}
        freeMode={true}
        watchSlidesProgress={true}
      >
        {images.map((image, index) => (
          <SwiperSlide key={index}>
            <img
              src={image.thumb}
              alt={`Thumbnail ${index}`}
              style={{
                width: '100%',
                height: '100px',
                objectFit: 'cover',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default ImageGallerySwiper;

Now create a product carousel:

// src/ProductCarouselSwiper.jsx
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

function ProductCarouselSwiper() {
  const products = [
    { id: 1, name: 'Product 1', price: '$99', image: 'https://via.placeholder.com/300x300/007bff/ffffff?text=Product+1' },
    { id: 2, name: 'Product 2', price: '$149', image: 'https://via.placeholder.com/300x300/28a745/ffffff?text=Product+2' },
    { id: 3, name: 'Product 3', price: '$199', image: 'https://via.placeholder.com/300x300/ffc107/000000?text=Product+3' },
    { id: 4, name: 'Product 4', price: '$249', image: 'https://via.placeholder.com/300x300/dc3545/ffffff?text=Product+4' },
    { id: 5, name: 'Product 5', price: '$299', image: 'https://via.placeholder.com/300x300/6c757d/ffffff?text=Product+5' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Product Carousel</h2>
      <Swiper
        modules={[Navigation]}
        spaceBetween={20}
        slidesPerView={1}
        navigation
        breakpoints={{
          640: {
            slidesPerView: 2,
            spaceBetween: 20
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 30
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40
          }
        }}
      >
        {products.map((product) => (
          <SwiperSlide key={product.id}>
            <div style={{
              padding: '15px',
              textAlign: 'center',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              height: '100%'
            }}>
              <img
                src={product.image}
                alt={product.name}
                style={{
                  width: '100%',
                  height: '250px',
                  objectFit: 'cover',
                  borderRadius: '4px',
                  marginBottom: '10px'
                }}
              />
              <h3 style={{ margin: '0 0 5px 0' }}>{product.name}</h3>
              <p style={{ margin: 0, fontWeight: 'bold', color: '#007bff' }}>{product.price}</p>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

export default ProductCarouselSwiper;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGallerySwiper from './ImageGallerySwiper';
import ProductCarouselSwiper from './ProductCarouselSwiper';
import './App.css';

function App() {
  return (
    <div className="App">
      <ImageGallerySwiper />
      <ProductCarouselSwiper />
    </div>
  );
}

export default App;

This example demonstrates:

Image gallery with thumbnail navigation
Product carousel with responsive breakpoints
Navigation and pagination
Touch/swipe gestures
Custom styling

Common Issues / Troubleshooting

Swiper not displaying: Make sure you've imported the CSS file (import 'swiper/css'). The Swiper requires styles to render correctly.
Navigation not showing: Import the Navigation module and its CSS. Add modules={[Navigation]} and navigation prop to enable navigation arrows.
Pagination not working: Import the Pagination module and its CSS. Add modules={[Pagination]} and pagination={{ clickable: true }} prop.
Thumbnails not syncing: For thumbnail galleries, use the Thumbs module. Set thumbs={{ swiper: thumbsSwiper }} on the main swiper and use onSwiper={setThumbsSwiper} on the thumbnail swiper.
Responsive not working: Use the breakpoints prop with an object. Each breakpoint key should be a media query string (e.g., '640' for 640px).
Modules not working: Make sure you're importing modules from 'swiper/modules' and passing them to the modules prop as an array.

Next Steps

Now that you have a basic understanding of Swiper:

Learn about all available modules (Autoplay, Effect, etc.)
Explore advanced configuration options
Implement lazy loading for images
Add custom animations and effects
Create vertical sliders
Learn about other slider libraries (react-slick, keen-slider)
Check the official documentation: https://swiperjs.com/react

Summary

You've successfully set up Swiper in your React application and created image galleries and product carousels with navigation, pagination, and responsive breakpoints. Swiper provides a powerful, feature-rich solution for creating professional sliders with excellent touch support.

SEO Keywords

swiper
React Swiper
swiper tutorial
React carousel component
swiper installation
React image slider
swiper example
React touch slider
swiper setup
React slider library
swiper customization
React Swiper modules
swiper navigation
React carousel slider
swiper getting started

Advanced Touch Sliders with Keen Slider in React

Patrick Moore — Mon, 19 Jan 2026 17:39:10 +0000

Keen Slider is a lightweight, performant slider and carousel library for React applications. It provides native touch/swipe behavior, excellent performance, and extensive customization options for creating professional sliders and carousels. This guide walks through advanced usage of Keen Slider with React, including React hooks integration, plugins, and complex slider configurations. Keen Slider with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useRef, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of touch events and gestures

Installation

Install Keen Slider using your preferred package manager:

npm install keen-slider

Or with yarn:

yarn add keen-slider

Or with pnpm:

pnpm add keen-slider

After installation, your package.json should include:

{
  "dependencies": {
    "keen-slider": "^6.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the CSS file in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'keen-slider/keen-slider.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple slider. Create a new file src/SliderExample.jsx:

// src/SliderExample.jsx
import React from 'react';
import { useKeenSlider } from 'keen-slider/react';
import 'keen-slider/keen-slider.min.css';

function SliderExample() {
  const [sliderRef, instanceRef] = useKeenSlider({
    loop: true,
    slideChanged() {
      console.log('slide changed');
    }
  });

  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Keen Slider Example</h2>
      <div ref={sliderRef} className="keen-slider">
        {images.map((image, index) => (
          <div key={index} className="keen-slider__slide">
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default SliderExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import SliderExample from './SliderExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <SliderExample />
    </div>
  );
}

export default App;

This creates a basic slider with loop functionality and touch support.

Understanding the Basics

Keen Slider provides a React hook for integration:

useKeenSlider hook: React hook for creating sliders
sliderRef: Ref callback for the slider container
instanceRef: Ref to access slider API methods
Options object: Configure slider behavior
Plugins: Extend functionality with plugins
CSS classes: Use keen-slider and keen-slider__slide classes

Key concepts for advanced usage:

Hook usage: Use useKeenSlider hook with options and plugins
Ref assignment: Assign sliderRef to the container element
Slide structure: Use keen-slider__slide class for slides
API access: Use instanceRef to control slider programmatically
Event callbacks: Use callbacks like slideChanged, created, etc.

Here's an example with navigation and autoplay:

// src/AdvancedSliderExample.jsx
import React, { useState } from 'react';
import { useKeenSlider } from 'keen-slider/react';
import 'keen-slider/keen-slider.min.css';

function AdvancedSliderExample() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [loaded, setLoaded] = useState(false);

  const [sliderRef, instanceRef] = useKeenSlider({
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel);
    },
    created() {
      setLoaded(true);
    },
    loop: true
  });

  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Advanced Keen Slider</h2>
      <div style={{ position: 'relative' }}>
        <div ref={sliderRef} className="keen-slider">
          {images.map((image, index) => (
            <div key={index} className="keen-slider__slide">
              <img
                src={image}
                alt={`Slide ${index + 1}`}
                style={{ width: '100%', height: '400px', objectFit: 'cover' }}
              />
            </div>
          ))}
        </div>
        {loaded && instanceRef.current && (
          <>
            <button
              onClick={(e) => {
                e.stopPropagation();
                instanceRef.current?.prev();
              }}
              disabled={currentSlide === 0}
              style={{
                position: 'absolute',
                left: '10px',
                top: '50%',
                transform: 'translateY(-50%)',
                padding: '10px 15px',
                backgroundColor: 'rgba(255,255,255,0.9)',
                color: '#333',
                border: 'none',
                borderRadius: '50%',
                cursor: 'pointer',
                zIndex: 1
              }}
            >
              ‹
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                instanceRef.current?.next();
              }}
              disabled={currentSlide === instanceRef.current.track.details.slides.length - 1}
              style={{
                position: 'absolute',
                right: '10px',
                top: '50%',
                transform: 'translateY(-50%)',
                padding: '10px 15px',
                backgroundColor: 'rgba(255,255,255,0.9)',
                color: '#333',
                border: 'none',
                borderRadius: '50%',
                cursor: 'pointer',
                zIndex: 1
              }}
            >
              ›
            </button>
          </>
        )}
      </div>
      {loaded && (
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          {Array.from({ length: images.length }).map((_, idx) => (
            <button
              key={idx}
              onClick={() => instanceRef.current?.moveToIdx(idx)}
              style={{
                width: '12px',
                height: '12px',
                borderRadius: '50%',
                border: 'none',
                backgroundColor: currentSlide === idx ? '#007bff' : '#ccc',
                cursor: 'pointer',
                margin: '0 5px'
              }}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default AdvancedSliderExample;

Practical Example / Building Something Real

Let's build a comprehensive image gallery with thumbnails:

// src/ImageGalleryKeenSlider.jsx
import React, { useState } from 'react';
import { useKeenSlider } from 'keen-slider/react';
import 'keen-slider/keen-slider.min.css';

function ImageGalleryKeenSlider() {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [loaded, setLoaded] = useState(false);

  const images = [
    {
      full: 'https://via.placeholder.com/1200x800/007bff/ffffff?text=Image+1',
      thumb: 'https://via.placeholder.com/150x100/007bff/ffffff?text=1',
      title: 'Image 1'
    },
    {
      full: 'https://via.placeholder.com/1200x800/28a745/ffffff?text=Image+2',
      thumb: 'https://via.placeholder.com/150x100/28a745/ffffff?text=2',
      title: 'Image 2'
    },
    {
      full: 'https://via.placeholder.com/1200x800/ffc107/000000?text=Image+3',
      thumb: 'https://via.placeholder.com/150x100/ffc107/000000?text=3',
      title: 'Image 3'
    },
    {
      full: 'https://via.placeholder.com/1200x800/dc3545/ffffff?text=Image+4',
      thumb: 'https://via.placeholder.com/150x100/dc3545/ffffff?text=4',
      title: 'Image 4'
    },
    {
      full: 'https://via.placeholder.com/1200x800/6c757d/ffffff?text=Image+5',
      thumb: 'https://via.placeholder.com/150x100/6c757d/ffffff?text=5',
      title: 'Image 5'
    }
  ];

  const [mainSliderRef, mainInstanceRef] = useKeenSlider({
    initial: 0,
    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel);
      thumbInstanceRef.current?.moveToIdx(slider.track.details.rel);
    },
    created() {
      setLoaded(true);
    }
  });

  const [thumbSliderRef, thumbInstanceRef] = useKeenSlider({
    initial: 0,
    slides: {
      perView: 4,
      spacing: 10
    },
    created() {
      setLoaded(true);
    }
  });

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h1>Image Gallery with Keen Slider</h1>
      <div style={{ marginBottom: '20px' }}>
        <div ref={mainSliderRef} className="keen-slider">
          {images.map((image, index) => (
            <div key={index} className="keen-slider__slide">
              <img
                src={image.full}
                alt={image.title}
                style={{
                  width: '100%',
                  height: '600px',
                  objectFit: 'cover',
                  borderRadius: '8px'
                }}
              />
            </div>
          ))}
        </div>
      </div>
      <div ref={thumbSliderRef} className="keen-slider">
        {images.map((image, index) => (
          <div
            key={index}
            className="keen-slider__slide"
            onClick={() => {
              mainInstanceRef.current?.moveToIdx(index);
            }}
            style={{
              cursor: 'pointer',
              opacity: currentSlide === index ? 1 : 0.6,
              border: currentSlide === index ? '3px solid #007bff' : '1px solid #ddd',
              borderRadius: '4px',
              overflow: 'hidden'
            }}
          >
            <img
              src={image.thumb}
              alt={`Thumbnail ${index}`}
`}
              style={{
                width: '100%',
                height: '100px',
                objectFit: 'cover'
              }}
            />
          </div>
        ))}
      </div>
      {loaded && (
        <div style={{ textAlign: 'center', marginTop: '20px', color: '#666' }}>
          Image {currentSlide + 1} of {images.length}
        </div>
      )}
    </div>
  );
}

export default ImageGalleryKeenSlider;

Now create a product carousel with multiple slides:

// src/ProductCarouselKeenSlider.jsx
import React from 'react';
import { useKeenSlider } from 'keen-slider/react';
import 'keen-slider/keen-slider.min.css';

function ProductCarouselKeenSlider() {
  const [sliderRef] = useKeenSlider({
    loop: true,
    mode: 'free-snap',
    slides: {
      perView: 1,
      spacing: 15
    },
    breakpoints: {
      '(min-width: 640px)': {
        slides: { perView: 2, spacing: 15 }
      },
      '(min-width: 1024px)': {
        slides: { perView: 3, spacing: 20 }
      }
    }
  });

  const products = [
    { id: 1, name: 'Product 1', price: '$99', image: 'https://via.placeholder.com/300x300/007bff/ffffff?text=Product+1' },
    { id: 2, name: 'Product 2', price: '$149', image: 'https://via.placeholder.com/300x300/28a745/ffffff?text=Product+2' },
    { id: 3, name: 'Product 3', price: '$199', image: 'https://via.placeholder.com/300x300/ffc107/000000?text=Product+3' },
    { id: 4, name: 'Product 4', price: '$249', image: 'https://via.placeholder.com/300x300/dc3545/ffffff?text=Product+4' },
    { id: 5, name: 'Product 5', price: '$299', image: 'https://via.placeholder.com/300x300/6c757d/ffffff?text=Product+5' }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Product Carousel</h2>
      <div ref={sliderRef} className="keen-slider">
        {products.map((product) => (
          <div key={product.id} className="keen-slider__slide">
            <div style={{
              padding: '15px',
              textAlign: 'center',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              height: '100%'
            }}>
              <img
                src={product.image}
                alt={product.name}
                style={{
                  width: '100%',
                  height: '250px',
                  objectFit: 'cover',
                  borderRadius: '4px',
                  marginBottom: '10px'
                }}
              />
              <h3 style={{ margin: '0 0 5px 0' }}>{product.name}</h3>
              <p style={{ margin: 0, fontWeight: 'bold', color: '#007bff' }}>{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default ProductCarouselKeenSlider;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGalleryKeenSlider from './ImageGalleryKeenSlider';
import ProductCarouselKeenSlider from './ProductCarouselKeenSlider';
import './App.css';

function App() {
  return (
    <div className="App">
      <ImageGalleryKeenSlider />
      <ProductCarouselKeenSlider />
    </div>
  );
}

export default App;

This example demonstrates:

Image gallery with thumbnail navigation
Product carousel with responsive breakpoints
Programmatic control
Multiple slider instances
Touch/swipe gestures
Custom navigation

Common Issues / Troubleshooting

Slider not displaying: Make sure you've imported the CSS file (import 'keen-slider/keen-slider.min.css'). Also ensure the container has the keen-slider class and slides have keen-slider__slide class.
Hook not working: Import useKeenSlider from 'keen-slider/react'. The hook returns an array with [sliderRef, instanceRef].
Navigation not working: Use instanceRef.current to access slider methods like next(), prev(), and moveToIdx(). Check that the slider is loaded before calling these methods.
Responsive not working: Use the breakpoints option with media query strings. Configure slides.perView and slides.spacing for each breakpoint.
Thumbnails not syncing: For thumbnail galleries, use separate slider instances and sync them using slideChanged callbacks and moveToIdx() method.
Performance issues: Keen Slider is optimized for performance. If you experience issues, check for CSS conflicts or ensure slides have proper dimensions.

Next Steps

Now that you have an advanced understanding of Keen Slider:

Explore all available options and plugins
Learn about custom animations
Implement lazy loading for images
Add custom navigation controls
Create vertical sliders
Learn about other slider libraries (swiper, react-slick)
Check the official repository: https://github.com/rcbyr/keen-slider

Summary

You've successfully integrated Keen Slider into your React application with advanced features including thumbnail navigation, responsive breakpoints, programmatic control, and multiple slider instances. Keen Slider provides a lightweight, performant solution for creating professional sliders with excellent touch support.

SEO Keywords

keen-slider
React Keen Slider
keen-slider tutorial
React touch slider
keen-slider installation
React carousel slider
keen-slider example
React slider library
keen-slider setup
React performant slider
keen-slider customization
React slider hooks
keen-slider React integration
React slider component
keen-slider getting started

Building Carousels with react-slick in React

Patrick Moore — Mon, 19 Jan 2026 17:36:29 +0000

react-slick is a popular React carousel component built on top of Slick Carousel. It provides a feature-rich carousel solution with extensive customization options, responsive breakpoints, and smooth animations. This guide walks through setting up and creating carousels using react-slick with React, from installation to a working implementation. This is part on using react-slick with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useRef)
Familiarity with JavaScript/TypeScript
Understanding of CSS

Installation

Install react-slick and slick-carousel CSS:

npm install react-slick slick-carousel

Or with yarn:

yarn add react-slick slick-carousel

Or with pnpm:

pnpm add react-slick slick-carousel

After installation, your package.json should include:

{
  "dependencies": {
    "react-slick": "^0.29.0",
    "slick-carousel": "^1.8.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the CSS files in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple image carousel. Create a new file src/SlickExample.jsx:

// src/SlickExample.jsx
import React from 'react';
import Slider from 'react-slick';

function SlickExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Slick Carousel Example</h2>
      <Slider {...settings}>
        {images.map((image, index) => (
          <div key={index}>
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '400px', objectFit: 'cover' }}
            />
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default SlickExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import SlickExample from './SlickExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <SlickExample />
    </div>
  );
}

export default App;

This creates a basic carousel with navigation dots and autoplay.

Understanding the Basics

react-slick provides extensive configuration options:

Slider component: Main carousel component
Settings object: Configuration for carousel behavior
Responsive breakpoints: Different settings for different screen sizes
Custom arrows: Customizable navigation arrows
Multiple slides: Show multiple slides at once
Touch support: Swipe gestures on mobile

Key concepts:

Settings object: Configure carousel through a settings prop
Slides structure: Each slide is wrapped in a div
Responsive: Use responsive array for breakpoint-specific settings
Custom components: Customize arrows, dots, and other elements
Event handlers: Use callbacks for slide changes and interactions

Here's an example with responsive breakpoints:

// src/ResponsiveSlickExample.jsx
import React from 'react';
import Slider from 'react-slick';

function ResponsiveSlickExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4',
    'https://via.placeholder.com/800x400/6c757d/ffffff?text=Slide+5'
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Responsive Slick Carousel</h2>
      <Slider {...settings}>
        {images.map((image, index) => (
          <div key={index} style={{ padding: '0 10px' }}>
            <img
              src={image}
              alt={`Slide ${index + 1}`}
              style={{ width: '100%', height: '300px', objectFit: 'cover', borderRadius: '8px' }}
            />
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default ResponsiveSlickExample;

Practical Example / Building Something Real

Let's build a comprehensive image gallery with custom controls:

// src/ImageGallerySlick.jsx
import React, { useRef, useState } from 'react';
import Slider from 'react-slick';

function ImageGallerySlick() {
  const sliderRef = useRef(null);
  const [currentSlide, setCurrentSlide] = useState(0);

  const images = [
    {
      url: 'https://via.placeholder.com/800x500/007bff/ffffff?text=Image+1',
      title: 'Image 1',
      description: 'Description for image 1'
    },
    {
      url: 'https://via.placeholder.com/800x500/28a745/ffffff?text=Image+2',
      title: 'Image 2',
      description: 'Description for image 2'
    },
    {
      url: 'https://via.placeholder.com/800x500/ffc107/000000?text=Image+3',
      title: 'Image 3',
      description: 'Description for image 3'
    },
    {
      url: 'https://via.placeholder.com/800x500/dc3545/ffffff?text=Image+4',
      title: 'Image 4',
      description: 'Description for image 4'
    },
    {
      url: 'https://via.placeholder.com/800x500/6c757d/ffffff?text=Image+5',
      title: 'Image 5',
      description: 'Description for image 5'
    }
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    arrows: true,
    beforeChange: (current, next) => setCurrentSlide(next)
  };

  const goToSlide = (index) => {
    sliderRef.current.slickGoTo(index);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h1>Image Gallery with Slick</h1>
      <div style={{ position: 'relative', marginBottom: '20px' }}>
        <Slider ref={sliderRef} {...settings}>
          {images.map((image, index) => (
            <div key={index}>
              <div style={{ position: 'relative' }}>
                <img
                  src={image.url}
                  alt={image.title}
                  style={{ width: '100%', height: '500px', objectFit: 'cover' }}
                />
                <div style={{
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  right: 0,
                  background: 'linear-gradient(to top, rgba(0,0,0,0.7), transparent)',
                  color: 'white',
                  padding: '20px'
                }}>
                  <h3 style={{ margin: '0 0 5px 0' }}>{image.title}</h3>
                  <p style={{ margin: 0 }}>{image.description}</p>
                </div>
              </div>
            </div>
          ))}
        </Slider>
      </div>
      <div style={{ textAlign: 'center', marginBottom: '20px', color: '#666' }}>
        Image {currentSlide + 1} of {images.length}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: '10px', flexWrap: 'wrap' }}>
        {images.map((image, index) => (
          <img
            key={index}
            src={image.url}
            alt={image.title}
            onClick={() => goToSlide(index)}
            style={{
              width: '100px',
              height: '100px',
              objectFit: 'cover',
              borderRadius: '4px',
              cursor: 'pointer',
              border: currentSlide === index ? '3px solid #007bff' : '1px solid #ddd',
              opacity: currentSlide === index ? 1 : 0.7
            }}
          />
        ))}
      </div>
    </div>
  );
}

export default ImageGallerySlick;

Now create a product carousel:

// src/ProductCarouselSlick.jsx
import React from 'react';
import Slider from 'react-slick';

function ProductCarouselSlick() {
  const products = [
    { id: 1, name: 'Product 1', price: '$99', image: 'https://via.placeholder.com/300x300/007bff/ffffff?text=Product+1' },
    { id: 2, name: 'Product 2', price: '$149', image: 'https://via.placeholder.com/300x300/28a745/ffffff?text=Product+2' },
    { id: 3, name: 'Product 3', price: '$199', image: 'https://via.placeholder.com/300x300/ffc107/000000?text=Product+3' },
    { id: 4, name: 'Product 4', price: '$249', image: 'https://via.placeholder.com/300x300/dc3545/ffffff?text=Product+4' },
    { id: 5, name: 'Product 5', price: '$299', image: 'https://via.placeholder.com/300x300/6c757d/ffffff?text=Product+5' },
    { id: 6, name: 'Product 6', price: '$349', image: 'https://via.placeholder.com/300x300/17a2b8/ffffff?text=Product+6' }
  ];

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Product Carousel</h2>
      <Slider {...settings}>
        {products.map((product) => (
          <div key={product.id} style={{ padding: '0 10px' }}>
            <div style={{
              padding: '15px',
              textAlign: 'center',
              backgroundColor: '#f8f9fa',
              borderRadius: '8px',
              height: '100%'
            }}>
              <img
                src={product.image}
                alt={product.name}
                style={{
                  width: '100%',
                  height: '250px',
                  objectFit: 'cover',
                  borderRadius: '4px',
                  marginBottom: '10px'
                }}
              />
              <h3 style={{ margin: '0 0 5px 0' }}>{product.name}</h3>
              <p style={{ margin: 0, fontWeight: 'bold', color: '#007bff' }}>{product.price}</p>
            </div>
          </div>
        ))}
      </Slider>
    </div>
  );
}

export default ProductCarouselSlick;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGallerySlick from './ImageGallerySlick';
import ProductCarouselSlick from './ProductCarouselSlick';
import './App.css';

function App() {
  return (
    <div className="App">
      <ImageGallerySlick />
      <ProductCarouselSlick />
    </div>
  );
}

export default App;

This example demonstrates:

Image gallery with custom controls
Product carousel with multiple slides
Responsive breakpoints
Thumbnail navigation
Programmatic slide control
Custom styling

Common Issues / Troubleshooting

Carousel not displaying: Make sure you've imported both CSS files (slick.css and slick-theme.css). The carousel requires these styles to render correctly.
Arrows not showing: Check that arrows: true is set in settings. Also ensure the CSS files are imported correctly, as arrows are styled by the theme CSS.
Responsive not working: Use the responsive array in settings. Each breakpoint object should have a breakpoint (in pixels) and settings object.
Autoplay not working: Set autoplay: true and specify autoplaySpeed in milliseconds. Also ensure infinite: true for continuous playback.
Slides not aligned: Use slidesToShow and slidesToScroll to control how many slides are visible and how many scroll at a time. Add padding to slides using inline styles or CSS.
Ref not working: Use useRef to create a ref and pass it to the Slider component. Access methods like slickGoTo(), slickNext(), and slickPrev() through the ref.

Next Steps

Now that you have an understanding of react-slick:

Explore all available settings and options
Learn about custom arrows and dots
Implement lazy loading for images
Add custom animations
Create vertical carousels
Learn about other carousel libraries (swiper, react-responsive-carousel)
Check the official repository: https://github.com/akiran/react-slick

Summary

You've successfully integrated react-slick into your React application and created image galleries and product carousels with responsive breakpoints and custom controls. react-slick provides a powerful, feature-rich solution for creating carousels with extensive customization options.

SEO Keywords

react-slick
React carousel component
react-slick tutorial
React Slick Carousel
react-slick installation
React image carousel
react-slick example
React slider component
react-slick setup
React responsive carousel
react-slick customization
React carousel library
react-slick breakpoints
React slick settings
react-slick getting started

Getting Started with React Responsive Carousel: Building Image Carousels

Patrick Moore — Mon, 19 Jan 2026 17:35:12 +0000

React Responsive Carousel is a simple and responsive carousel component for React applications. It provides an easy way to create image carousels that automatically adapt to different screen sizes, making it perfect for building mobile-friendly image galleries. This guide walks through setting up and creating responsive carousels using React Responsive Carousel with React, from installation to a working implementation. This is part 61 of a series on using React Responsive Carousel with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Responsive Carousel using your preferred package manager:

npm install react-responsive-carousel

Or with yarn:

yarn add react-responsive-carousel

Or with pnpm:

pnpm add react-responsive-carousel

After installation, your package.json should include:

{
  "dependencies": {
    "react-responsive-carousel": "^3.2.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import the CSS file in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple image carousel. Create a new file src/CarouselExample.jsx:

// src/CarouselExample.jsx
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

function CarouselExample() {
  const images = [
    'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
    'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
    'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
    'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4'
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Carousel Example</h2>
      <Carousel>
        {images.map((image, index) => (
          <div key={index}>
            <img src={image} alt={`Slide ${index + 1}`} />
            <p className="legend">Slide {index + 1}</p>
          </div>
        ))}
      </Carousel>
    </div>
  );
}

export default CarouselExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import CarouselExample from './CarouselExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <CarouselExample />
    </div>
  );
}

export default App;

This creates a basic responsive carousel with navigation and legends.

Understanding the Basics

React Responsive Carousel provides several key features:

Carousel component: Main carousel container
Automatic responsiveness: Adapts to screen size automatically
Navigation arrows: Previous/next buttons
Indicators: Dots for slide navigation
Touch support: Swipe gestures on mobile
Legend support: Text captions for slides

Key concepts:

Slide structure: Each slide is a div with content inside
Legend: Optional text caption using legend class
Responsive: Automatically adjusts to container width
Touch gestures: Swipe support enabled by default
Styling: Import CSS file for default styles

Here's an example with custom configuration:

// src/AdvancedCarouselExample.jsx
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

function AdvancedCarouselExample() {
  const images = [
    {
      url: 'https://via.placeholder.com/800x400/007bff/ffffff?text=Slide+1',
      legend: 'First Slide'
    },
    {
      url: 'https://via.placeholder.com/800x400/28a745/ffffff?text=Slide+2',
      legend: 'Second Slide'
    },
    {
      url: 'https://via.placeholder.com/800x400/ffc107/000000?text=Slide+3',
      legend: 'Third Slide'
    },
    {
      url: 'https://via.placeholder.com/800x400/dc3545/ffffff?text=Slide+4',
      legend: 'Fourth Slide'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Advanced Carousel Example</h2>
      <Carousel
        showArrows={true}
        showStatus={true}
        showIndicators={true}
        showThumbs={false}
        infiniteLoop={true}
        autoPlay={true}
        interval={3000}
        transitionTime={500}
      >
        {images.map((image, index) => (
          <div key={index}>
            <img src={image.url} alt={image.legend} />
            <p className="legend">{image.legend}</p>
          </div>
        ))}
      </Carousel>
    </div>
  );
}

export default AdvancedCarouselExample;

Practical Example / Building Something Real

Let's build a complete image gallery carousel:

// src/ImageGalleryCarousel.jsx
import React, { useState } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

function ImageGalleryCarousel() {
  const [selectedIndex, setSelectedIndex] = useState(0);

  const images = [
    {
      url: 'https://via.placeholder.com/800x500/007bff/ffffff?text=Image+1',
      title: 'Image 1',
      description: 'Description for image 1'
    },
    {
      url: 'https://via.placeholder.com/800x500/28a745/ffffff?text=Image+2',
      title: 'Image 2',
      description: 'Description for image 2'
    },
    {
      url: 'https://via.placeholder.com/800x500/ffc107/000000?text=Image+3',
      title: 'Image 3',
      description: 'Description for image 3'
    },
    {
      url: 'https://via.placeholder.com/800x500/dc3545/ffffff?text=Image+4',
      title: 'Image 4',
      description: 'Description for image 4'
    },
    {
      url: 'https://via.placeholder.com/800x500/6c757d/ffffff?text=Image+5',
      title: 'Image 5',
      description: 'Description for image 5'
    }
  ];

  const handleChange = (index) => {
    setSelectedIndex(index);
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h1>Image Gallery Carousel</h1>
      <Carousel
        showArrows={true}
        showStatus={true}
        showIndicators={true}
        infiniteLoop={true}
        selectedItem={selectedIndex}
        onChange={handleChange}
        autoPlay={false}
        transitionTime={500}
      >
        {images.map((image, index) => (
          <div key={index}>
            <img src={image.url} alt={image.title} />
            <div className="legend" style={{
              backgroundColor: 'rgba(0,0,0,0.7)',
              padding: '15px',
              textAlign: 'left'
            }}>
              <h3 style={{ margin: '0 0 5px 0', color: 'white' }}>{image.title}</h3>
              <p style={{ margin: 0, color: 'white' }}>{image.description}</p>
            </div>
          </div>
        ))}
      </Carousel>
      <div style={{ marginTop: '20px', textAlign: 'center', color: '#666' }}>
        Image {selectedIndex + 1} of {images.length}
      </div>
    </div>
  );
}

export default ImageGalleryCarousel;

Now create a product carousel:

// src/ProductCarousel.jsx
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

function ProductCarousel() {
  const products = [
    {
      image: 'https://via.placeholder.com/400x400/007bff/ffffff?text=Product+1',
      name: 'Product 1',
      price: '$99'
    },
    {
      image: 'https://via.placeholder.com/400x400/28a745/ffffff?text=Product+2',
      name: 'Product 2',
      price: '$149'
    },
    {
      image: 'https://via.placeholder.com/400x400/ffc107/000000?text=Product+3',
      name: 'Product 3',
      price: '$199'
    },
    {
      image: 'https://via.placeholder.com/400x400/dc3545/ffffff?text=Product+4',
      name: 'Product 4',
      price: '$249'
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h2>Product Carousel</h2>
      <Carousel
        showArrows={true}
        showIndicators={true}
        infiniteLoop={true}
        centerMode={true}
        centerSlidePercentage={80}
        showThumbs={false}
      >
        {products.map((product, index) => (
          <div key={index} style={{ padding: '10px' }}>
            <img src={product.image} alt={product.name} />
            <div className="legend" style={{
              backgroundColor: 'white',
              color: '#333',
              padding: '15px'
            }}>
              <h3 style={{ margin: '0 0 5px 0' }}>{product.name}</h3>
              <p style={{ margin: 0, fontWeight: 'bold', color: '#007bff' }}>{product.price}</p>
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
}

export default ProductCarousel;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ImageGalleryCarousel from './ImageGalleryCarousel';
import ProductCarousel from './ProductCarousel';
import './App.css';

function App() {
  return (
    <div className="App">
      <ImageGalleryCarousel />
      <ProductCarousel />
    </div>
  );
}

export default App;

This example demonstrates:

Image gallery carousel with navigation
Product carousel with center mode
Custom legends and captions
State management for selected slide
Responsive design
Touch/swipe support

Common Issues / Troubleshooting

Carousel not displaying: Make sure you've imported the CSS file (import 'react-responsive-carousel/lib/styles/carousel.min.css'). The carousel requires styles to render correctly.
Images not showing: Ensure image URLs are valid and accessible. Check that images are properly wrapped in div elements inside the Carousel.
Navigation not working: Check that showArrows and showIndicators props are set to true if you want navigation controls.
AutoPlay not working: Set autoPlay={true} and specify an interval in milliseconds. Also ensure infiniteLoop is enabled for continuous playback.
Responsive issues: The carousel is responsive by default. If it's not adapting, check that the container has proper width constraints and isn't fixed to a specific size.
Touch gestures not working: Touch support is enabled by default. If gestures aren't working, check for CSS conflicts or ensure the carousel container is properly sized.

Next Steps

Now that you have a basic understanding of React Responsive Carousel:

Learn about advanced carousel configurations
Explore custom styling options
Implement thumbnail navigation
Add custom animations
Create vertical carousels
Learn about other carousel libraries (react-slick, swiper)
Check the official repository: https://github.com/leandrowd/react-responsive-carousel
Look for part 62 of this series for more advanced topics

Summary

You've successfully set up React Responsive Carousel in your React application and created image galleries and product carousels with navigation controls. React Responsive Carousel provides a simple, responsive solution for creating carousels that work well on all devices.

SEO Keywords

react-responsive-carousel
React carousel component
react-responsive-carousel tutorial
React image carousel
react-responsive-carousel installation
React responsive slider
react-responsive-carousel example
React mobile carousel
react-responsive-carousel setup
React touch carousel
react-responsive-carousel customization
React carousel library
react-responsive-carousel navigation
React image gallery
react-responsive-carousel getting started