# better-react-carousel

> React resposive carousel component w/ grid layout

Latest version **1.1.2** (published 2023-08-28) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-08-28 |
| First published | 2022-06-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 62.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 25 |
| Author | DevPanther |
| Maintainers | devpanther |
| Keywords | react, carousel, slider, gallery, image, grid, responsive, react-component, react-carousel, react-slider, react-image, react-grid |

## Links

- npm: https://www.npmjs.com/package/better-react-carousel
- Repository: https://github.com/DevPanther/better-react-carousel
- Issues: https://github.com/DevPanther/better-react-carousel/issues
- npm.io page: https://npm.io/package/better-react-carousel

## Dependencies (4)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.1
- [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) ^0.4.4

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2023-08-28
- 1.1.1 — 2022-06-04
- 1.1.0 — 2022-06-04
- 1.0.9 — 2022-06-03
- 1.0.8 — 2022-06-03
- 1.0.7 — 2022-06-03
- 1.0.6 — 2022-06-03
- 1.0.5 — 2022-06-03
- 1.0.4 — 2022-06-03
- 1.0.3 — 2022-06-03
- 1.0.2 — 2022-06-03
- 1.0.1 — 2022-06-03
- 1.0.0 — 2022-06-03

## README

<h1 align="center">Better React Carousel - Typed</h1>
<p align="center">React responsive carousel component w/ grid layout <br />to easily create a carousel like photo gallery, shopping product card or anything you want</p>

<p align="center">
<img src="https://gist.githubusercontent.com/x3388638/82e341b43990c7851c9438dfdec43e3b/raw/69d266ba9f7140994eefb5bb9623d7bd339a12ae/demo2.gif" width="400px" />
<img src="https://gist.githubusercontent.com/x3388638/82e341b43990c7851c9438dfdec43e3b/raw/69d266ba9f7140994eefb5bb9623d7bd339a12ae/demo1.gif" width="100%" />
<img src="https://gist.githubusercontent.com/x3388638/82e341b43990c7851c9438dfdec43e3b/raw/69d266ba9f7140994eefb5bb9623d7bd339a12ae/demo3.gif" width="600px" />
</p>

## Features

- RWD
- Multiple items
- Multiple rows
- Infinite loop
- Support any component as a item to put into grid
- Show/hide dots
- Show/hide arrow buttons
- Autoplay
- Enable/Disable `scroll-snap` for each item on mobile device
- Customized layout (cols & rows) for different breakpoint
- Customized arrow button
- Customized dots
- Support SSR

## Install

```bash
$ npm install better-react-carousel --save
```

## Usage

Just import the `Carousel` component from `better-react-carousel`  
and put your item into `Carousel.Item`

```javascript
import React from 'react'
import Carousel from 'better-react-carousel'

const Gallery = () => {
  return (
    <Carousel cols={2} rows={1} gap={10} loop>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=1" />
      </Carousel.Item>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=2" />
      </Carousel.Item>
      <Carousel.Item>
        <img width="100%" src="https://picsum.photos/800/600?random=3" />
      </Carousel.Item>
      <Carousel.Item>
        {/* anything you want to show in the grid */}
      </Carousel.Item>
      {/* ... */}
    </Carousel>
  )
}
```

## Props

| Prop                                  | Type             | Default   | Description                                                                         |
| ------------------------------------- | ---------------- | --------- | ----------------------------------------------------------------------------------- |
| cols                                  | Number           | 1         | Column amount rendered per page                                                     |
| rows                                  | Number           | 1         | Row amount rendered per page                                                        |
| gap                                   | Number \| String | 10        | Margin (grid-gap) for each item/grid in px or %, passed Number will turn to px unit |
| loop                                  | Boolean          | false     | Infinite loop or not                                                                |
| scrollSnap                            | Boolean          | true      | `true` for applying `scroll-snap` to items on mobile                                |
| hideArrow                             | Boolean          | false     | Show/hide the arrow prev/next buttons                                               |
| showDots                              | Boolean          | false     | Show dots indicate the current page on desktop mode                                 |
| autoplay                              | Number           |           | Autoplay timeout in ms; `undefined` for autoplay disabled                           |
| dotColorActive                        | String           | '#795548' | Valid css color value for active dot                                                |
| dotColorInactive                      | String           | '#ccc'    | Valid css color value for inactive dot                                              |
| [responsiveLayout](#responsiveLayout) | Array            |           | Customized cols & rows on different viewport size                                   |
| mobileBreakpoint                      | Number           | 767       | The breakpoint(px) to switch to default mobile layout                               |
| arrowLeft                             | Element          |           | Customized left arrow button                                                        |
| arrowRight                            | Element          |           | Customized left arrow button                                                        |
| [dot](#dot)                           | Element          |           | Customized dot component with prop `isActive`                                       |
| containerStyle                        | Object           |           | Style object for carousel container                                                 |

### responsiveLayout

Array of layout settings for each breakbpoint

#### Setting options

- `breakpoint`: Number; Requried; Equals to `max-width` used in media query, in px unit
- `cols`: Number; Column amount in specific breakpoint
- `rows`: Number; Row amount in specific breakpoint
- `gap`: Number | String; Gap size in specific breakpoint
- `loop`: Boolean; Infinite loop in specific breakpoint
- `autoplay`: Number; autoplay timeout(ms) in specific breakpoint; `undefined` for autoplay disabled

e.g.

```
[
  {
    breakpoint: 800,
    cols: 3,
    rows: 1,
    gap: 10,
    loop: true,
    autoplay: 1000
  }
]
```

### dot

#### Example

```javascript
// your custom dot component with prop `isActive`
const MyDot = ({ isActive }) => (
  <span
    style={{
      display: 'inline-block',
      height: isActive ? '8px' : '5px',
      width: isActive ? '8px' : '5px',
      background: '#1890ff'
    }}
  ></span>
)

// set custom dot
<Carousel dot={MyDot} />
```

## Example

Storybook (Don't forget to try on different viewport size)

```bash
$ git clone https://github.com/DevPanther/better-react-carousel
$ cd better-react-carousel

$ npm ci
$ npm run storybook
```

Use case in real world

```bash
# clone & install packages
$ npm run dev
# open localhost:8080
```

## LICENSE

MIT

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