React Grid Carousel

React resposive carousel component w/ grid layout
to easily create a carousel like photo gallery, shopping product card or anything you want

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

$ npm install react-grid-carousel --save

Usage

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

import React from 'react'
import Carousel from 'react-grid-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	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	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

// 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)

$ git clone https://github.com/x3388638/react-grid-carousel
$ cd react-grid-carousel
$ npm ci
$ npm run storybook

Use case in real world

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

or visit https://react-grid-carousel.now.sh/#use-case-in-real-world

LICENSE

MIT