react-multi-carousel - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

lib/Carousel.d.ts

@@ -16,2 +16,3 @@ import * as React from "react";
     setContainerAndItemWidth(slidesToShow: number, shouldCorrectItemPosition?: boolean): void;
+    correctItemsPosition(itemWidth: number): void;
     onResize(): void;
@@ -30,2 +31,3 @@ componentDidUpdate({ keyBoardControl, autoPlay }: CarouselProps, { containerWidth }: CarouselInternalState): void;
     goToSlide(slide: number): void;
+    getState(): any;
     renderLeftArrow(): React.ReactElement<any>;
@@ -32,0 +34,0 @@ renderRightArrow(): React.ReactElement<any>;

lib/Carousel.js

@@ -67,8 +67,14 @@ "use strict";
             if (shouldCorrectItemPosition) {
-                this.setState({
-                    transform: -(itemWidth * this.state.currentSlide)
-                });
+                this.correctItemsPosition(itemWidth);
             }
         }
     }
+    correctItemsPosition(itemWidth) {
+        if (!this.isAnimationAllowed) {
+            this.isAnimationAllowed = true;
+        }
+        this.setState({
+            transform: -(itemWidth * this.state.currentSlide)
+        });
+    }
     onResize() {
@@ -236,7 +242,19 @@ this.setItemsToShow();
                 const slidesHavePassed = Math.round((this.initialPosition - this.lastPosition) / this.state.itemWidth);
-                this.next(slidesHavePassed);
+                if (this.initialPosition - this.lastPosition >=
+                    this.props.minimumTouchDrag) {
+                    this.next(slidesHavePassed);
+                }
+                else {
+                    this.correctItemsPosition(this.state.itemWidth);
+                }
             }
             if (this.direction === "left") {
                 const slidesHavePassed = Math.round((this.lastPosition - this.initialPosition) / this.state.itemWidth);
-                this.previous(slidesHavePassed);
+                if (this.lastPosition - this.initialPosition >
+                    this.props.minimumTouchDrag) {
+                    this.previous(slidesHavePassed);
+                }
+                else {
+                    this.correctItemsPosition(this.state.itemWidth);
+                }
             }
@@ -267,2 +285,5 @@ this.resetMoveStatus();
     }
+    getState() {
+        return Object.assign({}, this.state, { onMove: this.onMove, direction: this.direction });
+    }
     renderLeftArrow() {
@@ -272,3 +293,4 @@ const { customLeftArrow } = this.props;
             return React.cloneElement(customLeftArrow, {
-                onClick: () => this.previous()
+                onClick: () => this.previous(),
+                state: this.getState()
             });
@@ -284,3 +306,4 @@ }
             return React.cloneElement(customRightArrow, {
-                onClick: () => this.next()
+                onClick: () => this.next(),
+                state: this.getState()
             });
@@ -293,6 +316,14 @@ }
     renderDotsList() {
+        const { customDot } = this.props;
         return (React.createElement("ul", { className: "react-multi-carousel-dot-list" }, Array(this.state.totalItems)
             .fill(0)
             .map((item, index) => {
-            return (React.createElement("li", { className: `react-multi-carousel-dot ${this.state.currentSlide === index
+            if (customDot) {
+                return React.cloneElement(customDot, {
+                    index,
+                    onClick: () => this.goToSlide(index),
+                    state: this.getState()
+                });
+            }
+            return (React.createElement("li", { key: index, className: `react-multi-carousel-dot ${this.state.currentSlide === index
                     ? "react-multi-carousel-dot--active"
@@ -334,3 +365,8 @@ : ""}` },
                     width: domFullyLoaded ? `${itemWidth}px` : "auto"
-                }, className: itemClassName }, child)))),
+                }, className: itemClassName }, React.cloneElement(child, {
+                index,
+                isvisible: index >= this.state.currentSlide &&
+                    index < this.state.currentSlide + this.state.slidesToShow,
+                state: this.getState()
+            }))))),
             shouldShowArrows && !disableLeftArrow && this.renderLeftArrow(),
@@ -349,5 +385,6 @@ shouldShowArrows && !disableRightArrow && this.renderRightArrow(),
     autoPlaySpeed: 3000,
-    shouldShowDots: false
+    shouldShowDots: false,
+    minimumTouchDrag: 50
 };
 exports.default = Carousel;
 //# sourceMappingURL=Carousel.js.map

lib/types.d.ts

@@ -20,6 +20,8 @@ /// <reference types="react" />
     removeArrowOnDeviceType?: string | Array<string>;
-    children: React.ReactNode | null;
+    children: any;
     customLeftArrow?: React.ReactElement<any> | null;
     customRightArrow?: React.ReactElement<any> | null;
+    customDot?: React.ReactElement<any> | null;
     infinite?: boolean;
+    minimumTouchDrag: number;
     contentClassName?: string;
@@ -26,0 +28,0 @@ itemClassName?: string;

package.json

 {
   "name": "react-multi-carousel",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "",
@@ -8,3 +8,2 @@ "main": "index.js",
   "scripts": {
-    "prebuild": "npm run test",
     "build": "rm -rf ./lib && tsc && npm run after-build",
@@ -11,0 +10,0 @@ "test": "jest",

README.md

 # react-multi-carousel
 
-Lightweight React carousel component supports multiple items and SSR(Server-side rendering) with typescript.
+Lightweight customizable React carousel component supports multiple items and SSR(Server-side rendering) with typescript.
 
@@ -46,2 +46,4 @@ The technical details of this carousel can be found at [www.w3js.com -> react-multi-carousel](https://w3js.com/index.php/2019/03/06/react-carousel-with-server-side-rendering-support-part-1z/).
 
+For example, we want to show 3 items at the same time on desktop (screen size 1024 - 2000px possibily) and 2 items on tablet(700px - 1024px) and 1 item on mobile.  ---> this can be achieved through user-agent detection.
+
 More detailed can be found in this blog post [here](https://w3js.com/index.php/2019/03/06/react-carousel-with-server-side-rendering-support-part-1z/).
@@ -66,4 +68,8 @@
 * Custom arrows / control buttons
+* Custom dots
 * Custom styling
+* Accessibility support
 
+
+
 ## Examples
@@ -112,7 +118,46 @@
 
+You custom arrows will receive a list of props/state  that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.
+
 ```
-const CustomRightArrow = ({ onClick }) => <button onClick={() => onClick()} />
+const CustomRightArrow = ({ onClick, ...rest }) => {
+  const { onMove, state: {  currentSlide, deviceType }  } = rest;
+  // onMove means if dragging or swiping in progress.
+  return <button onClick={() => onClick()} />
+}
 <Carousel customRightArrow={<CustomRightArrow />} />
 ```
 
+## Custom dots.
+You can pass your own custom dots to replace the default one
+
+You custom dots will receive a list of props/state  that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.
+
+```
+const CustomDot = ({ onClick, ...rest }) => {
+  const { onMove, index, state: { currentSlide, deviceType }  } = rest;
+  // onMove means if dragging or swiping in progress.
+  return <button className={currentSlide === index ? 'active' : 'inactive'} onClick={() => onClick()} />
+}
+<Carousel shouldShowDots customDot={<CustomDot />} />
+```
+
+## The items you passed as children.
+
+All the items you passed as children will received a list of props/state of the current carousel that's passed back by the Carousel.
+This is useful if you want to support accessibility or do your own stuff.
+
+const CarouselItem = ({ isvisible, currentSlide, onMove }) => {
+  return <div onClick={(e) => {
+    if(onMove) {
+      e.preventDefault();
+    }
+  }} aria-hidden={isvisible ? 'false':'true'} className={isvisible? 'special style' : 'normal style'}></div>
+}
+<Carousel>
+  <CarouselItem />
+  <CarouselItem />
+  <CarouselItem />
+</Carousel>
+
+
 ## General Props
@@ -128,13 +173,16 @@ ```
   removeArrowOnDeviceType?: string | Array<string>;
-  children: React.ReactNode | null;
+  children: any;
   customLeftArrow?: React.ReactElement<any> | null;
   customRightArrow?: React.ReactElement<any> | null;
+  customDot?: React.ReactElement<any> | null;
   infinite?: boolean;
+  minimumTouchDrag: number; // default 50px. The amount of distance to drag / swipe in order to move to the next slide.
   contentClassName?: string;
-  itemClassName?:string;
+  itemClassName?: string;
   containerClassName?: string;
   keyBoardControl?: boolean;
-  autoPlay?: boolean; // make sure you put infinite={true} if autoPlay is enabled.
+  autoPlay?: boolean;
   autoPlaySpeed?: number; // default 3000ms
-  customTransition?:string;
+  shouldShowDots?: boolean;
+  customTransition?: string;
   transitionDuration?: number;
@@ -141,0 +189,0 @@ // if you are using customTransition, make sure to put the duration here.

No alert changes

Improved metrics

Total package byte prevSize

77875

increased by6.19%

Lines of code

602

increased by7.31%

Number of lines in readme file

202

increased by31.17%

No dependency changes