Narrowly Preventing Mayhem

    @chipp972/carousel
    TypeScript icon, indicating that this package has built-in type declarations

    1.6.1 • Public • Published

    @chipp972/carousel

    Carousel component.

    Install

    npm i -S @chipp972/carousel

    Usage

    Setup the carousel in the redux store to be able to control it with redux actions:

    import { combineReducers } from 'redux';
    import { carouselReducerKey, carouselReducer } from '@chipp972/carousel';
    import { otherReducers } from './reducers';
    
    export const rootReducer = combineReducers({
      [carouselReducerKey]: carouselReducer,
      ...otherReducers
    });

    Use the component in your app by wrapping all the steps you need to display in the carousel:

    import React from 'react';
    import { Carousel } from '@chipp972/carousel';
    import { carouselId } from './constants';
    import { StepComponent1, StepComponent2, StepComponent3, StepComponent4 } from './component';
    
    export const Example = () => (
      <Carousel carouselId={carouselId} isScrollToTop isSwipeDisabled>
        <StepComponent1 />
        <StepComponent2 />
        <StepComponent3 />
        <StepComponent4 />
      </Carousel>
    );

    Here is an example of step:

    import React from 'react';
    import { carouselId } from '../constants';
    import { useCarousel } from '@chipp972/carousel';
    
    export const StepComponent1: React.FC = () => {
      const { currentStepIndex, goPrevStep, goNextStep } = useCarousel(carouselId);
      return (
        <section>
          <div>STEP {currentStepIndex}</div>
          <button onClick={goPrevStep}>go previous step</button>
          <button onClick={goNextStep}>go next step</button>
        </section>
      );
    };

    Props

    name type description optional default
    carouselId string Unique identifier for the carousel in the redux store false
    startSlide number Index position Swipe should start at true 0
    transitionSpeed number Speed of prev and next transitions in milliseconds true 300 ms
    isSwipeDisabled boolean Stop any touches on this container from scrolling the page true false
    isContinuous boolean Create an infinite feel with no endpoints true false
    isScrollToTop boolean Scroll to the top of the carousel on slide change true false
    autoSliding number Begin with auto slideshow (time in milliseconds between slides) true 0
    widthOfSiblingSlidePreview number Width of next and previous slide preview in pixels true 0
    onTransitionStart (index: number, currentStep: HTMLElement) => void Runs at slide change true
    onTransitionEnd (index: number, currentStep: HTMLElement) => void Runs at the end slide transition true
    onSwipe (position: number) => void invoked while swiping with the percentage (0-1) of the full width that has been swiped true

    Usage without Redux

    You can use the "raw" version which is just a React wrapper of swipe-js-iso with some additional options.

    import React from 'react';
    import { RawCarousel, SwipeInstance } from '@chipp972/carousel';
    
    const slideStyle = {
      height: '100vh',
      color: 'white',
      textAlign: 'center',
      fontSize: 50
    };
    
    export const Example = () => {
      // You will need a ref to trigger the carousel actions
      const ref = React.useRef<SwipeInstance>(null);
    
      return (
        <>
          <button onClick={() => ref.current?.slide(0)}>jump to first</button>
          <button onClick={() => ref.current?.prev()}>prev</button>
          <button onClick={() => ref.current?.next()}>next</button>
          <button onClick={() => ref.current?.slide(ref.current?.getNumSlides() - 1)}>jump to last</button>
    
          <RawCarousel
            ref={ref}
            id="test-raw"
            swipeOptions={{
              widthOfSiblingSlidePreview: 400,
              continuous: false
            }}>
            <div style={{ backgroundColor: 'red', ...slideStyle }}>1</div>
            <div style={{ backgroundColor: 'blue', ...slideStyle }}>2</div>
            <div style={{ backgroundColor: 'green', ...slideStyle }}>3</div>
          </RawCarousel>
        </>
      );
    };

    Polyfill

    You should use a polyfill to enable smoothscrolling on ios devices. For example with smoothscroll-polyfill :

    import smoothscroll from 'smoothscroll-polyfill';
    
    smoothscroll.polyfill();

    Changelog

    1.6.1

    • Use ramda es5 imports

    1.6.0

    • Use content-visibility css property to improve performances

    1.5.3

    • Remove useless babel config

    1.5.2

    • Remove smooth scroll polyfill for ios to not break static site build

    1.5.1

    • Fix emotion appearing in build files

    1.5.0

    • Add a dependencyList parameter to re-render the carousel on demand
    • fix startSlide being a required parameter (default is 0)

    1.4.0

    • Export raw carousel to be used without Redux

    1.3.1

    • Fix siblings preview

    1.3.0

    • Add polyfill for smooth scrolling on ios devices

    Keywords

    none

    Install

    npm i @chipp972/carousel

    DownloadsWeekly Downloads

    0

    Version

    1.6.1

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    21

    Last publish

    Collaborators

    • chipp972