npm

react-whirlpool
TypeScript icon, indicating that this package has built-in type declarations

0.1.15 • Public • Published

React Whirlpool Carousel

https://github.com/A7ALABS/react-whirlpool/assets/60537632/0e27a034-7582-431d-95b3-263f224c9048

https://github.com/A7ALABS/react-whirlpool/assets/60537632/d5f3ba93-56ca-4ff5-8467-dc10b4f72be2

Features

  • Responsive
  • Customize previous and next buttons
  • Bi-directional - horizontal and vertical
  • Auto play

Installing

yarn add react-whirlpool

Important

Make sure to import the css file with import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css'

Usage

import React, { useRef, useState } from "react";
import { SimpleCarousel } from "react-whirlpool";
import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css' // => important

function App() {
  const [list, setList] = useState(["A", "B", "C", "D", "E"]);
  const simpleCarouselRef = useRef<any>();
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div >
      <SimpleCarousel
        isHorizontal={true}
        gap={20}
        autoPlay={false}
        minHeight="254px"
        ref={simpleCarouselRef}
        hideArrows={true}
        onActiveIndexUpdate={(index: number) => setActiveIndex(index)}
      >
        {list.map((item: string, key) => (
          <div key={key}>
            {item}
          </div>
        ))}
      </SimpleCarousel>
      //custom prev and next buttons
      <button
        onClick={() => {
          simpleCarouselRef.current &&
            simpleCarouselRef.current.handlePrevEvent();
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          simpleCarouselRef.current &&
            simpleCarouselRef.current.handleNextEvent();
        }}
      >
        Next
      </button>
    </div>
  );
}

export default App;

Props

Name Value Description
isHorizontal boolean Define the direction of the slider, defaults to 'horizontal'.
children JSX Element Pass any number of JSX elements (carousel cards) which are to be rendered in the carousel
gap number Define gap (in px) between two carousel cards
minHeight string, optional Define the minimum height of the carousel container
minWidth string, optional Define the minimum width of the carousel container
onActiveIndexUpdate function, optional Takes an active index (number) as argument to update selected index in SimpleCarousel
autoplay boolean, default false, optional Enable auto rotation of carousel, rotation interval is set to 3000ms
autoPlayInterval number, default 3000, optional Auto-play interval in milliseconds
hideArrows boolean, default true, optional Hide default arrows
hideDevPanel boolean, default true, optional Hide dev panel
hideInitGap boolean, default true, optional Hide initial gap between the first card and carousel container
ref any, optional Create and pass reference to access the handler methods - 1. handlePrevEvent() to handle previous button clicking event and 2. handleNextEvent() to handle next button clicking event

Common Issues

  1. CJS WARNING - Failed to parse source map => Workaround - Link

Package Sidebar

Install

npm i react-whirlpool

Weekly Downloads

20

Version

0.1.15

License

MIT

Unpacked Size

43.6 kB

Total Files

23

Last publish

Collaborators

  • swastij
  • mechaadi
  • a7aent