framer-motion-carousel - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

CHANGELOG.md

 # Change Log
 
+## 1.0.5
+
+support custom dots
+
+## 1.0.4
+
+add a live demo
+
 ## 1.0.3
@@ -4,0 +12,0 @@

dist/cjs/carousel.js

@@ -10,2 +10,10 @@ "use strict";
 
+var _arrow = _interopRequireDefault(require("./arrow"));
+
+var _slider = _interopRequireDefault(require("./slider"));
+
+var _dots = _interopRequireDefault(require("./dots"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -15,4 +23,2 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var containerStyle = {
@@ -25,8 +31,2 @@ position: "relative",
 };
-var pageStyle = {
-  width: "100%",
-  height: "100%",
-  display: "inline-block",
-  flex: "none"
-};
 var transition = {
@@ -43,53 +43,11 @@ type: "spring",
 
-var Slider = function Slider(_ref) {
-  var x = _ref.x,
-      i = _ref.i,
-      onDragEnd = _ref.onDragEnd,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(_framerMotion.motion.div, {
-    style: _extends({}, pageStyle, {
-      x: x,
-      left: i * 100 + "%",
-      right: i * 100 + "%"
-    }),
-    drag: "x",
-    dragElastic: 0.3,
-    onDragEnd: onDragEnd
-  }, children);
-};
-
-var baseArrowStyle = {
-  position: "absolute",
-  width: "50px",
-  height: "50px",
-  backgroundColor: "rgba(0,0,0,0.5)",
-  top: "50%",
-  transform: "translateY(-50%)",
-  borderRadius: "50%",
-  color: "#fff",
-  fontSize: "20px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer"
-};
-
-var Arrow = function Arrow(_ref2) {
-  var _ref2$left = _ref2.left,
-      left = _ref2$left === void 0 ? false : _ref2$left,
-      children = _ref2.children,
-      onClick = _ref2.onClick;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
-    style: _extends({}, baseArrowStyle, {
-      left: left ? "20px" : "initial",
-      right: !left ? "10px" : "initial"
-    })
-  }, children);
-};
-
-var Carousel = function Carousel(_ref3) {
-  var children = _ref3.children,
-      renderArrowLeft = _ref3.renderArrowLeft,
-      renderArrowRight = _ref3.renderArrowRight;
+var Carousel = function Carousel(_ref) {
+  var children = _ref.children,
+      renderArrowLeft = _ref.renderArrowLeft,
+      renderArrowRight = _ref.renderArrowRight,
+      renderDots = _ref.renderDots,
+      _ref$autoPlay = _ref.autoPlay,
+      autoPlay = _ref$autoPlay === void 0 ? true : _ref$autoPlay,
+      _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 2000 : _ref$interval;
   var x = (0, _framerMotion.useMotionValue)(0);
@@ -137,6 +95,16 @@ var containerRef = React.useRef(null);
   }, [index]);
+  React.useEffect(function () {
+    if (!autoPlay) {
+      return;
+    }
+
+    var timer = setInterval(function () {
+      return handleNext();
+    }, interval);
+    return clearInterval(timer);
+  }, [handleNext, interval]);
   return /*#__PURE__*/React.createElement(Contaier, {
     ref: containerRef
   }, childrens.map(function (child, i) {
-    return /*#__PURE__*/React.createElement(Slider, {
+    return /*#__PURE__*/React.createElement(_slider["default"], {
       onDragEnd: handleEndDrag,
@@ -149,3 +117,3 @@ x: x,
     activeIndex: index
-  }) : /*#__PURE__*/React.createElement(Arrow, {
+  }) : /*#__PURE__*/React.createElement(_arrow["default"], {
     left: true,
@@ -156,7 +124,14 @@ onClick: handlePrev
     activeIndex: index
-  }) : /*#__PURE__*/React.createElement(Arrow, {
+  }) : /*#__PURE__*/React.createElement(_arrow["default"], {
     onClick: handleNext
-  }, "\u2192"));
+  }, "\u2192"), renderDots ? renderDots({
+    setActiveIndex: setIndex,
+    activeIndex: index
+  }) : /*#__PURE__*/React.createElement(_dots["default"], {
+    length: childrens.length,
+    setActiveIndex: setIndex,
+    activeIndex: index
+  }));
 };
 
 exports.Carousel = Carousel;

dist/esm/carousel.js

@@ -1,5 +0,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import * as React from "react";
-import { animate, motion, useMotionValue } from "framer-motion";
+import { animate, useMotionValue } from "framer-motion";
+import Arrow from "./arrow";
+import Slider from "./slider";
+import Dots from "./dots";
 var containerStyle = {
@@ -12,8 +13,2 @@ position: "relative",
 };
-var pageStyle = {
-  width: "100%",
-  height: "100%",
-  display: "inline-block",
-  flex: "none"
-};
 var transition = {
@@ -27,59 +22,11 @@ type: "spring",
 }, props.children));
-
-var Slider = _ref => {
+export var Carousel = _ref => {
   var {
-    x,
-    i,
-    onDragEnd,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(motion.div, {
-    style: _extends({}, pageStyle, {
-      x,
-      left: i * 100 + "%",
-      right: i * 100 + "%"
-    }),
-    drag: "x",
-    dragElastic: 0.3,
-    onDragEnd: onDragEnd
-  }, children);
-};
-
-var baseArrowStyle = {
-  position: "absolute",
-  width: "50px",
-  height: "50px",
-  backgroundColor: "rgba(0,0,0,0.5)",
-  top: "50%",
-  transform: "translateY(-50%)",
-  borderRadius: "50%",
-  color: "#fff",
-  fontSize: "20px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer"
-};
-
-var Arrow = _ref2 => {
-  var {
-    left = false,
     children,
-    onClick
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: onClick,
-    style: _extends({}, baseArrowStyle, {
-      left: left ? "20px" : "initial",
-      right: !left ? "10px" : "initial"
-    })
-  }, children);
-};
-
-export var Carousel = _ref3 => {
-  var {
-    children,
     renderArrowLeft,
-    renderArrowRight
-  } = _ref3;
+    renderArrowRight,
+    renderDots,
+    autoPlay = true,
+    interval = 2000
+  } = _ref;
   var x = useMotionValue(0);
@@ -126,2 +73,10 @@ var containerRef = React.useRef(null);
   }, [index]);
+  React.useEffect(() => {
+    if (!autoPlay) {
+      return;
+    }
+
+    var timer = setInterval(() => handleNext(), interval);
+    return clearInterval(timer);
+  }, [handleNext, interval]);
   return /*#__PURE__*/React.createElement(Contaier, {
@@ -144,3 +99,10 @@ ref: containerRef
     onClick: handleNext
-  }, "\u2192"));
+  }, "\u2192"), renderDots ? renderDots({
+    setActiveIndex: setIndex,
+    activeIndex: index
+  }) : /*#__PURE__*/React.createElement(Dots, {
+    length: childrens.length,
+    setActiveIndex: setIndex,
+    activeIndex: index
+  }));
 };

dist/types/carousel.d.ts

@@ -1,15 +0,4 @@
-import * as React from "react";
-declare type CarouselProps = {
-    children: React.ReactNode;
-    renderArrowLeft?: (args: {
-        handlePrev: () => void;
-        activeIndex: number;
-    }) => void;
-    renderArrowRight?: (args: {
-        handleNext: () => void;
-        activeIndex: number;
-    }) => void;
-};
-export declare const Carousel: ({ children, renderArrowLeft, renderArrowRight, }: CarouselProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { CarouselProps } from "./types";
+export declare const Carousel: ({ children, renderArrowLeft, renderArrowRight, renderDots, autoPlay, interval, }: CarouselProps) => JSX.Element;
 //# sourceMappingURL=carousel.d.ts.map

package.json

 {
   "name": "framer-motion-carousel",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "A simple framer motion carousel component for React",
@@ -11,4 +11,6 @@ "keywords": [
     "framer",
-    "collapse",
-    "framer motion"
+    "swipe",
+    "image gallary",
+    "framer motion",
+    "chakra ui"
   ],
@@ -15,0 +17,0 @@ "author": "jiangbo2015 <[e-mail]>",

README.md

 # framer-motion-carousel
 
-A simple framer-motion-carousel
-
+A simple `framer-motion-carousel`, used for `framer-motion`, `chakra-ui`
+support `click` and `swipe`, support custom `arrows`, `dots`, easy to use.
 ## Basic Usage
@@ -32,2 +32,22 @@
 
+## images carousel
+
+`img` element should add `draggable=false`
+
+```jsx
+<div style={{ width: 600, height: 400, margin: "0 auto" }}>
+  <Carousel>
+    {[1, 2, 3, 4].map((item, i) => (
+      <img
+        draggable="false"
+        src={`./${item}.jpg`}
+        key={i}
+        width="100%"
+        alt=""
+      />
+    ))}
+  </Carousel>
+</div>
+```
+
 ## Example
@@ -39,26 +59,15 @@
 
-## Use your arrows
 
-```
-renderArrowLeft: ({handlePrev, activeIndex}) => React.ReactNode
-```
+## props
 
-```
-renderArrowRight: ({handleNext, activeIndex}) => React.ReactNode
-```
+| props            | type                                                                                 | default | description        |
+|------------------|--------------------------------------------------------------------------------------|---------|--------------------|
+| autoPlay         | boolean                                                                              | true    | auto play          |
+| interval         | number                                                                               | 2000    | auto play interval |
+| renderArrowLeft  | ({handlePrev: () => void, activeIndex: number}) => React.ReactNode                   | null    | custom your arrows |
+| renderArrowRight | ({handleNext: () => void, activeIndex: number}) => React.ReactNode                   | null    | custom your arrows |
+| renderDots       | ({activeIndex: number, setActiveIndex: (index: number) => void;}) => React.ReactNode | null    | custom your dots   |
 
-```jsx
-const App = () => (
-  <Carousel renderArrowLeft={({handlePrev, activeIndex}) => <div />}>
-    ...
-  </Carousel>
-)
-```
 
-## Todo
 
-- dots
-- custom dots
-
-
 ## Development
@@ -65,0 +74,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59846

increased by24.72%

Number of package files

38

increased by111.11%

Lines of code

735

increased by49.39%

Number of lines in readme file

77

increased by13.24%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes