Wondering what’s next for npm?Check out our public roadmap! »

    react-grid-carousel

    1.0.1 • Public • Published

    NPM
    GitHub license npm version Open Source

    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

    Install

    npm i react-grid-carousel

    DownloadsWeekly Downloads

    1,045

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    125 kB

    Total Files

    53

    Last publish

    Collaborators

    • avatar