@itseasy21/react-elastic-carousel

A flexible and responsive carousel component for react, a fork of react-elastic-carousel

Why do we need yet another carousel component

• Element resize support (true responsiveness)
  Most of the carousel components are responsive to the viewport size, but this is not a real responsive support as we can have an element with a width:500px on a 1200px screen, most carousel component will "think" we are on a 1200px mode because they "watch" the view-port's size and not the wrapping element's size. This is the reason why react-eleastic-carousel is using the resize-observer which gives us a true responsive support, not matter on what screen size we are.

• RTL (right-to-left) support
  Supporting right-to-left languages requires a full support for right-to-left rendering and animations which is not supported in most of the carousel components out there. also, right-to-left support is important and should be a standard for most applications.

Live Demos & Docs

Install

npm install --save @itseasy21/react-elastic-carousel

or

yarn add @itseasy21/react-elastic-carousel

Requirements

• Node.js >= 16
• React 16.8.3 - 19
• React DOM 16.8.3 - 19
• Yarn 3.2.1 (for development)

Note

@itseasy21/react-elastic-carousel is using styled-components (v5 or v6) for styling, this means that you should install it as well:

npm install --save styled-components

Usage

import React, { Component } from 'react';
import Carousel from '@itseasy21/react-elastic-carousel';

class App extends Component {
  state = {
    items: [
      {id: 1, title: 'item #1'},
      {id: 2, title: 'item #2'},
      {id: 3, title: 'item #3'},
      {id: 4, title: 'item #4'},
      {id: 5, title: 'item #5'}
    ]
  }

  render () {
    const { items } = this.state;
    return (
      <Carousel>
        {items.map(item => <div key={item.id}>{item.title}</div>)}
      </Carousel>
    )
  }
}

Playground

Development

git clone https://github.com/itseasy21/react-elastic-carousel.git
cd react-elastic-carousel
corepack enable
yarn set version 3.2.1
yarn

To run the docs site run

yarn start

to run a demo Application run

yarn demo

The application is running at http://localhost:8888

Running tests

yarn test

Continuous Integration

This project uses GitHub Actions for CI/CD with the following workflows:

• Pull Request Checks: Linting, building, and testing with multiple React versions
• Build & Deploy: Automated build, test, and deployment on pushed to main/master branch

License

MIT © sag1v & itseasy21

Change Log

We use Semantic Versioning.
Each release can be found in the Github Releases page.

1.0.0 (Unreleased)

Breaking Changes

• Updated minimum Node.js requirement to v16
• Updated styled-components to v6.1.15
  • Added $ prefix to all custom props in styled components
  • Added support for both styled-components v5 and v6
• Migrated from Enzyme to React Testing Library for tests
• Replaced component defaultProps with JavaScript default parameters for better React 18+ compatibility

Features

• Added support for React 19
• Updated dependencies
  • react-swipeable to v7.0.2
  • classnames to v2.3.2
  • prop-types to v15.8.1
  • resize-observer-polyfill to v1.5.1
• Improved testing with React Testing Library
  • Added compatibility tests for React 16.8.3, 18, and 19
  • Made tests more focused on user interaction than implementation details

Build System

• Updated Rollup to v4.9.1
• Updated Babel configuration
  • @babel/core to v7.23.7
  • @babel/preset-env to v7.23.7
  • @babel/preset-react to v7.23.3
  • @babel/runtime to v7.23.7
• Updated rollup configuration for compatibility with Rollup 4
• Added CI/CD improvements
  • Implemented GitHub Actions workflows for PRs and deployments
  • Added Yarn 3.2.1 packageManager specification
  • Ensured cross-version compatibility testing