# react-rapid-carousel

> A simple but epic React Responsive Carousel.

Latest version **2.0.1** (published 2021-05-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-rapid-carousel
pnpm add react-rapid-carousel
yarn add react-rapid-carousel
bun add react-rapid-carousel
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-05-06 |
| First published | 2020-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | chineduogada |
| Maintainers | stanley-ogada |

## Links

- npm: https://www.npmjs.com/package/react-rapid-carousel
- Repository: https://github.com/chineduogada/react-rapid-carousel
- Homepage: https://github.com/chineduogada/react-rapid-carousel#readme
- Issues: https://github.com/chineduogada/react-rapid-carousel/issues
- npm.io page: https://npm.io/package/react-rapid-carousel

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^5.2.0

## Recent versions

- 2.0.1 (latest) — 2021-05-06
- 2.0.0 — 2020-11-29
- 1.3.0 — 2020-10-16
- 1.2.1 — 2020-10-13
- 1.2.0 — 2020-10-13
- 1.1.3 — 2020-10-13
- 1.1.2 — 2020-10-12
- 1.1.1 — 2020-10-12
- 1.1.0 — 2020-10-09
- 1.0.3 — 2020-10-09
- 1.0.2 — 2020-10-09
- 1.0.1 — 2020-10-06
- 1.0.0 — 2020-10-06

## README

# react-rapid-carousel

> A simple but epic React Responsive Carousel.

[![NPM](https://img.shields.io/npm/v/react-rapid-carousel.svg)](https://www.npmjs.com/package/react-rapid-carousel) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-rapid-carousel
```

## USAGE

#### clone and test our github repo `https://github.com/chineduogada/react-rapid-carousel`, and cd `./example/src/Demos` for more examples

```jsx
import React, { useState } from 'react'

import { Slider, Fader } from 'react-rapid-carousel'
import 'react-rapid-carousel/dist/index.css'
import Card from 'card' // this Component are `children` of the `Slider`. For the best visual results, don't add `width` style property on it or `width: auto` is still okay.

const App = () => {
  const [products, setHeroes] = useState([])
  useEffect(() => {
    setTimeout(() => {
      setHeroes([
        { id: 1, title: 'car' },
        { id: 1, title: 'bike' },
        { id: 1, title: 'phone' },
        { id: 1, title: 'laptop' }
      ])
    }, 1000)
  }, [])

  return (
    <div>
      <Slider>
        {products.map((hero) => (
          <Card data={hero} key={hero.id} />
        ))}
      </Slider>
      
      <Slider
        // the `length` is endless :)
        breakpoints={[
          // define any width you want to break, but from from small to large widths
          { width: 391, slidesToShow: 1 },
          { width: 592, slidesToShow: 2 },
          { width: 830, slidesToShow: 3 },
          { width: 920, slidesToShow: 4 }
        ]}
      >
        {products.map((hero) => (
          <Card data={hero} key={hero.id} style={{ width: 'auto' }} />

          // Bad `width` style prop :(, Don't do it! Allow the Component do it for you, or use `breakpoints`
      for responsive desire
          // <Card  style={{ width: '200px' }} data={hero} key={hero.id} />
        ))}
      </Slider>
      // Best for rendering static content (Synchronous rendering)
      <Fader>
        <div>hi</div>
        <div>hello</div>
        <div>welcome</div>
        <div>goodbye</div>
      </Fader>
    </div>
  )
}
```

## API

### Components

#### Slider

| Prop         |                                                                Type/Default                                                                | Description                                                                                                                                                                                    |
| ------------ | :----------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| quickSlide   |                                                              boolean/`false`                                                               | Works with `autoSlide` and depends on `slidesToShow`: basically moves in sections: which makes much faster                                                                                     |
| dots         |                                                              boolean/`false`                                                               | Depends on `slidesToShow`: display dots below the Component for moving the slides to a particular section                                                                                      |
| buttons      |                                                               boolean/`true`                                                               | Display caret button: (`next` and `prev` buttons) for moving the slide back and forth                                                                                                          |
| slidesToShow |                                                                 number/`1`                                                                 | The amount of `slides` to display at a time                                                                                                                                                    |
| transition   |                                                          string/`"0.5s ease-in"`                                                           | Css transition property                                                                                                                                                                        |
| children     |                                         Array&#60;HTMLElement&#62; &#124;&#124; HTMLElement/`null`                                         | These are the total amount `slides` to be eventually displayed: all slides, For the best visual results, don't add `width` style property on it or `width: auto` is still okay                 |
| breakpoints  |                                        Array&#60;{width: number: slidesToShow: number}&#62;/`null`                                         | For responsive experience: `width`s should be arranged in an ascending manner/order to get the desired result                                                                                  |
| autoSlide    | boolean/`false` &#124;&#124; {reverse: boolean/`false`, pauseOnHover: boolean/`true`, pauseOnTab: boolean/`true`, interval: number/`3800`} | Adds animation: which happens after every interval which can be paused when the user `hovers` on the Slider or `tabs` on any focusable element and move in a reverse mode, if specified though |

#### Fader component

##### Fader can only render one `slide` at a time: perfect for `heroes`, `banners`, `ads` etc.... has lesser functionalities (but slower in performance, and should be used for rendering static content for best performance).

| Prop       |                                                   Type/Default                                                    | Description                                                                                                                                                                                    |
| ---------- | :---------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dots       |                                                  boolean/`true`                                                   | Depends on `slidesToShow`: display dots below the Component for moving the slides to a particular section                                                                                      |
| buttons    |                                                  boolean/`false`                                                  | Display caret button: (`next` and `prev` buttons) for moving the slide back and forth                                                                                                          |
| transition |                                              string/`"0.5s ease-in"`                                              | Css transition property                                                                                                                                                                        |
| children   |                            Array&#60;HTMLElement&#62; &#124;&#124; HTMLElement /`null`                            | These are the total amount `slides` to be eventually displayed: all slides, For the best visual results, don't add `width` style property on it or `width: auto` is still okay                 |
| autoSlide  | boolean/`true` &#124;&#124; {pauseOnHover: boolean/`true`, pauseOnTab: boolean/`true`, , interval: number/`3800`} | Adds animation: which happens after every interval which can be paused when the user `hovers` on the Slider or `tabs` on any focusable element and move in a reverse mode, if specified though |

#### ThemeProvider component

##### For changing the looks of `buttons` to match your brand

### USAGE

```jsx
import React, { useState } from 'react'

import { ThemeProvider, Slider, Fader } from 'react-rapid-carousel'
import 'react-rapid-carousel/dist/index.css'

const App = () => {
  return (
    <ThemeProvider
      theme={{
        dots: { 1: 'red', 2: 'orange' },
        carets: { 1: '#333', 2: '#3332' }
      }}
    >
      <Slider>
        <div>hi</div>
        <div>hello</div>
      </Slider>

      <ThemeProvider
        theme={{
          dots: { 1: 'blue', 2: 'cyan' },
          carets: { 1: 'gold', 2: 'rbg(20, 100, 225)' }
        }}
      >
        <Fader>
          <div>hi</div>
          <div>hello</div>
        </Fader>
      </ThemeProvider>
    </ThemeProvider>
  )
}
```

### API

| Prop  |                                    Type / Default                                     |
| ----- | :-----------------------------------------------------------------------------------: |
| theme | Object / { dots: { 1: '#333', 2: '#3332' }, carets: { 1: '#333', 2: 'transparent' } } |

## License

MIT © [chineduogada](https://github.com/chineduogada)

---
_Source: https://npm.io/package/react-rapid-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._