@defite/react-carousel v1.13.48

Table of Contents

• 🔌 Installation
• 🐥 Usage
• 🔨 Props
  • 🎠 Carousel Props
  • 🐾 Dots Props
• 🐞 Tests
• 😻 Contributing
• 📝 Decision Log

Why?

There are some great carousels (like slick) that do not have real React implementations. This library provides you with carousel that is not merely a wrapper for some jQuery solution, can be used as controlled or uncontrolled element (similar to inputs), and has tons of useful features.

Installation

Basic

npm i @brainhubeu/react-carousel

Typescript

npm i @types/brainhubeu__react-carousel -D

In order to run the docs/demo locally:

• cd docs-www
• if you want to connect demo with the carousel source code, replace __RC_ENV__ into development in https://github.com/brainhubeu/react-carousel/blob/master/docs-www/src/globalReferences.js#L2 and remove the .babelrc file in the root directory; otherwise, it will use the carousel code installed in docs-www/node_modules
• yarn develop

CDN

If you don't use any bundler like Webpack, you can add these scripts to your HTML file, body section:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin type="text/javascript" src="https://unpkg.com/@brainhubeu/react-carousel@1.10.62-cdn/lib/react-carousel.js"></script>

Make sure to use a version ending with -cdn.

Then, you can use the following global variables:

• BrainhubeuReactCarousel
• BrainhubeuReactCarouselDots
• BrainhubeuReactCarouselItem
• BrainhubeuReactCarouselWrapper

Usage

By default, the component does not need anything except children to render a simple carousel. Remember that styles do not have to be imported every time you use carousel, you can do it once in an entry point of your bundle.

import React, { Component } from 'react';
import Carousel from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';

export default class MyCarousel extends Component {
  render() {
    return (
      <Carousel arrows dots>
        <img src={imageOne} />
        <img src={imageTwo} />
        <img src={imageThree} />
      </Carousel>
    );
  }
}

Showing dots or thumbnails

There is a separate Dots component that can be used to fully control navigation dots or add thumbnails.

import Carousel, { Dots } from '@brainhubeu/react-carousel';
import '@brainhubeu/react-carousel/lib/style.css';

// ...

constructor(props) {
  super(props);
  this.state = {
    value: 0,
  };
}

onChange = value => this.setState({ value });

render() {
  return (
    <div>
      <Carousel
        value={this.state.value}
        onChange={this.onChange}
      >
        <img className="img-example" src={someImage} />
        ...
        <img className="img-example" src={anotherImage} />
      </Carousel>
      <Dots
        value={this.state.value}
        onChange={this.onChange}
        thumbnails={[
          (<img key={1} className="img-example-small" src={abstractImage} />),
          ...
          (<img key={12} className="img-example-small" src={transportImage} />),
        ]}
      />
    </div>
  );
}

Props

You can access a clickable demo with many examples and a live code editor by clicking on a Prop name.

Carousel props

Dots props

Tests

Unit tests

yarn test:unit

E2E tests

yarn test:e2e

Contributing

The GitHub issues list is our roadmap. You're more than welcome to vote:

• with 👍if you like a given feature request or you'd like a given bug to be fixed
• with ❤️ if you love a given feature request or fixing a given bug is critical for you
• with 👎if in your opinion, a given feature would create more damages than the value provided by it or you consider a given bug to be a feature

We don't give any guarantee to fix even the most liked issues but 👍and ❤️ increase probability of fixing while 👎decreases the probability of fixing.

You're also more than welcome to:

• submit a feature request
• report a bug
• ask a question
• comment an issue, discussing the details
• open a PR, fixing a given issue

Decision log

SSR

When using @brainhubeu/react-carousel with SSR (Server-side Rendering), we recommend Next.js as @brainhubeu/react-carousel currently doesn't work on the server side so it must be rendered on the client side (maybe we'll provide server-side working in the future).

import dynamic from 'next/dynamic';

const { default: Carousel, Dots } = dynamic(
 () => require('@brainhubeu/react-carousel'),
 { ssr: false },
);

License

react-carousel is copyright © 2018-2020 Brainhub. It is free software and may be redistributed under the terms specified in the license.

About

react-carousel is maintained by the Brainhub development team. It is funded by Brainhub and the names and logos for Brainhub are trademarks of Brainhub Sp. z o.o.. You can check other open-source projects supported/developed by our teammates here.

We love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.