react-flickity-component - npm Package Compare versions

Comparing version 4.0.7 to 5.0.0

dist/react-flickity-component.es.js

@@ -1,31 +0,29 @@
-import o, { Component as h } from "react";
-import { createPortal as y } from "react-dom";
-import a from "imagesloaded";
-import s from "prop-types";
-const u = !!(typeof window < "u" && window.document && window.document.createElement);
-class r extends h {
-  constructor(e) {
-    super(e), this.state = {
+import a, { Component as y } from "react";
+import { createPortal as p } from "react-dom";
+import c from "imagesloaded";
+const m = !!(typeof window < "u" && window.document && window.document.createElement), r = class r extends y {
+  constructor(t) {
+    super(t), this.carousel = null, this.flkty = null, this.state = {
       flickityReady: !1,
       flickityCreated: !1,
       cellCount: 0
-    }, this.carousel = null, this.flkty = null;
+    };
   }
-  static getDerivedStateFromProps(e, t) {
-    const i = o.Children.count(e.children);
-    return i !== t.cellCount ? { flickityReady: !1, cellCount: i } : null;
+  static getDerivedStateFromProps(t, e) {
+    const s = a.Children.count(t.children);
+    return s !== e.cellCount ? { flickityReady: !1, cellCount: s } : null;
   }
-  componentDidUpdate(e, t) {
-    if (!this.flkty)
-      return;
+  componentDidUpdate(t, e) {
+    if (!this.flkty) return;
     const {
-      children: i,
-      options: { draggable: l, initialIndex: n },
-      reloadOnUpdate: c,
-      disableImagesLoaded: d
-    } = this.props, { flickityReady: f } = this.state;
-    if (c || !t.flickityReady && f) {
-      const p = this.flkty.isActive;
-      this.flkty.deactivate(), this.flkty.selectedIndex = n || 0, this.flkty.options.draggable = l === void 0 ? i ? i.length > 1 : !1 : l, p && this.flkty.activate(), !d && this.carousel && a(this.carousel, () => {
-        this.flkty.reloadCells();
+      children: s,
+      options: { draggable: i, initialIndex: l } = {},
+      reloadOnUpdate: d,
+      disableImagesLoaded: f
+    } = this.props, { flickityReady: h } = this.state;
+    if (d || !e.flickityReady && h) {
+      const u = this.flkty.isActive;
+      this.flkty.deactivate(), this.flkty.selectedIndex = Number(l) || 0, this.flkty.options.draggable = i === void 0 ? s ? a.Children.count(s) > 1 : !1 : i, u && this.flkty.activate(), !f && this.carousel && c(this.carousel, () => {
+        var o;
+        (o = this.flkty) == null || o.reloadCells();
       });
@@ -36,44 +34,37 @@ } else
   async componentDidMount() {
-    if (!u || !this.carousel)
-      return null;
-    const e = (await import("flickity")).default, { flickityRef: t, options: i } = this.props;
-    this.flkty = new e(this.carousel, i), t && t(this.flkty), this.props.static ? this.setReady() : this.setState({ flickityCreated: !0 });
+    if (!m || !this.carousel) return;
+    const t = (await import("flickity")).default, { flickityRef: e, options: s = {} } = this.props;
+    this.flkty = new t(this.carousel, s), e && e(this.flkty), this.props.static ? this.setReady() : this.setState({ flickityCreated: !0 });
   }
   setReady() {
-    if (this.state.flickityReady)
-      return;
-    const e = () => this.setState({ flickityReady: !0 });
-    this.props.disableImagesLoaded ? e() : a(this.carousel, e);
+    if (this.state.flickityReady) return;
+    const t = () => this.setState({ flickityReady: !0 });
+    this.props.disableImagesLoaded ? t() : this.carousel && c(this.carousel, t);
   }
   renderPortal() {
-    if (!this.carousel)
-      return null;
-    const e = this.carousel.querySelector(".flickity-slider");
-    if (e) {
-      const t = y(this.props.children, e);
-      return setTimeout(() => this.setReady(), 0), t;
+    if (!this.carousel) return null;
+    const t = this.carousel.querySelector(".flickity-slider");
+    if (t) {
+      const e = p(this.props.children, t);
+      return setTimeout(() => this.setReady(), 0), e;
     }
   }
   render() {
-    return o.createElement(
-      this.props.elementType,
+    const {
+      elementType: t = "div",
+      className: e = "",
+      static: s,
+      children: i
+    } = this.props;
+    return a.createElement(
+      t,
       {
-        className: this.props.className,
-        ref: (e) => {
-          this.carousel = e;
+        className: e,
+        ref: (l) => {
+          this.carousel = l;
         }
       },
-      this.props.static ? this.props.children : this.renderPortal()
+      s ? i : this.renderPortal()
     );
   }
-}
-r.propTypes = {
-  children: s.array,
-  className: s.string,
-  disableImagesLoaded: s.bool,
-  elementType: s.string,
-  flickityRef: s.func,
-  options: s.object,
-  reloadOnUpdate: s.bool,
-  static: s.bool
 };
@@ -88,5 +79,6 @@ r.defaultProps = {
 };
+let n = r;
 export {
-  r as default
+  n as default
 };
 //# sourceMappingURL=react-flickity-component.es.js.map

dist/react-flickity-component.umd.js

@@ -1,2 +0,2 @@
-(function(t,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("react"),require("react-dom"),require("imagesloaded"),require("prop-types")):typeof define=="function"&&define.amd?define(["react","react-dom","imagesloaded","prop-types"],n):(t=typeof globalThis<"u"?globalThis:t||self,t.ReactFlickityComponent=n(t.React,t.ReactDOM,t.imagesloaded,t.PropTypes))})(this,function(t,n,a,i){"use strict";const d=!!(typeof window<"u"&&window.document&&window.document.createElement);class o extends t.Component{constructor(e){super(e),this.state={flickityReady:!1,flickityCreated:!1,cellCount:0},this.carousel=null,this.flkty=null}static getDerivedStateFromProps(e,s){const l=t.Children.count(e.children);return l!==s.cellCount?{flickityReady:!1,cellCount:l}:null}componentDidUpdate(e,s){if(!this.flkty)return;const{children:l,options:{draggable:r,initialIndex:c},reloadOnUpdate:f,disableImagesLoaded:u}=this.props,{flickityReady:h}=this.state;if(f||!s.flickityReady&&h){const p=this.flkty.isActive;this.flkty.deactivate(),this.flkty.selectedIndex=c||0,this.flkty.options.draggable=r===void 0?l?l.length>1:!1:r,p&&this.flkty.activate(),!u&&this.carousel&&a(this.carousel,()=>{this.flkty.reloadCells()})}else this.flkty.reloadCells()}async componentDidMount(){if(!d||!this.carousel)return null;const e=(await import("flickity")).default,{flickityRef:s,options:l}=this.props;this.flkty=new e(this.carousel,l),s&&s(this.flkty),this.props.static?this.setReady():this.setState({flickityCreated:!0})}setReady(){if(this.state.flickityReady)return;const e=()=>this.setState({flickityReady:!0});this.props.disableImagesLoaded?e():a(this.carousel,e)}renderPortal(){if(!this.carousel)return null;const e=this.carousel.querySelector(".flickity-slider");if(e){const s=n.createPortal(this.props.children,e);return setTimeout(()=>this.setReady(),0),s}}render(){return t.createElement(this.props.elementType,{className:this.props.className,ref:e=>{this.carousel=e}},this.props.static?this.props.children:this.renderPortal())}}return o.propTypes={children:i.array,className:i.string,disableImagesLoaded:i.bool,elementType:i.string,flickityRef:i.func,options:i.object,reloadOnUpdate:i.bool,static:i.bool},o.defaultProps={className:"",disableImagesLoaded:!1,elementType:"div",options:{},reloadOnUpdate:!1,static:!1},o});
+(function(t,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("react"),require("react-dom"),require("imagesloaded")):typeof define=="function"&&define.amd?define(["react","react-dom","imagesloaded"],l):(t=typeof globalThis<"u"?globalThis:t||self,t.ReactFlickityComponent=l(t.React,t.ReactDOM,t.imagesloaded))})(this,function(t,l,d){"use strict";const f=!!(typeof window<"u"&&window.document&&window.document.createElement),o=class o extends t.Component{constructor(e){super(e),this.carousel=null,this.flkty=null,this.state={flickityReady:!1,flickityCreated:!1,cellCount:0}}static getDerivedStateFromProps(e,i){const s=t.Children.count(e.children);return s!==i.cellCount?{flickityReady:!1,cellCount:s}:null}componentDidUpdate(e,i){if(!this.flkty)return;const{children:s,options:{draggable:a,initialIndex:n}={},reloadOnUpdate:u,disableImagesLoaded:h}=this.props,{flickityReady:y}=this.state;if(u||!i.flickityReady&&y){const p=this.flkty.isActive;this.flkty.deactivate(),this.flkty.selectedIndex=Number(n)||0,this.flkty.options.draggable=a===void 0?s?t.Children.count(s)>1:!1:a,p&&this.flkty.activate(),!h&&this.carousel&&d(this.carousel,()=>{var c;(c=this.flkty)==null||c.reloadCells()})}else this.flkty.reloadCells()}async componentDidMount(){if(!f||!this.carousel)return;const e=(await import("flickity")).default,{flickityRef:i,options:s={}}=this.props;this.flkty=new e(this.carousel,s),i&&i(this.flkty),this.props.static?this.setReady():this.setState({flickityCreated:!0})}setReady(){if(this.state.flickityReady)return;const e=()=>this.setState({flickityReady:!0});this.props.disableImagesLoaded?e():this.carousel&&d(this.carousel,e)}renderPortal(){if(!this.carousel)return null;const e=this.carousel.querySelector(".flickity-slider");if(e){const i=l.createPortal(this.props.children,e);return setTimeout(()=>this.setReady(),0),i}}render(){const{elementType:e="div",className:i="",static:s,children:a}=this.props;return t.createElement(e,{className:i,ref:n=>{this.carousel=n}},s?a:this.renderPortal())}};o.defaultProps={className:"",disableImagesLoaded:!1,elementType:"div",options:{},reloadOnUpdate:!1,static:!1};let r=o;return r});
 //# sourceMappingURL=react-flickity-component.umd.js.map

package.json

 {
   "name": "react-flickity-component",
-  "version": "4.0.7",
+  "version": "5.0.0",
   "description": "react flickity component",
   "files": [
-    "dist",
-    "src/index.d.ts"
+    "dist"
   ],
@@ -13,3 +12,3 @@ "main": "./dist/react-flickity-component.umd.js",
     ".": {
-      "types": "./src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/react-flickity-component.es.js",
@@ -20,8 +19,8 @@ "require": "./dist/react-flickity-component.umd.js"
   "scripts": {
-    "pretty": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.js\" \"examples/**/*.jsx\"",
+    "pretty": "prettier --single-quote --trailing-comma es5 --write \"src/**/*.ts[x]\" \"examples/**/*.ts[x]\"",
     "test": "vitest",
-    "dev": "vite",
-    "build": "node build.mjs",
-    "build:docs": "node build-docs.mjs",
-    "prepublishOnly": "node build.mjs"
+    "dev": "vite serve ./examples",
+    "build": "vite build",
+    "build:docs": "vite build --mode docs",
+    "prepublishOnly": "vite build"
   },
@@ -42,26 +41,30 @@ "author": "theolampert",
   "dependencies": {
-    "imagesloaded": "^4.1.4",
-    "prop-types": "^15.7.2"
+    "imagesloaded": "^4.1.4"
   },
   "devDependencies": {
     "@originjs/vite-plugin-commonjs": "^1.0.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/flickity": "^2.2.0",
+    "@types/imagesloaded": "^4.1.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "flickity": "^2.2.1",
-    "jsdom": "^20.0.3",
-    "prettier": "^2.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vite": "^4.0.0",
-    "vitest": "^0.25.7"
+    "jsdom": "^25.0.0",
+    "prettier": "^3.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.0.0",
+    "vitest": "^2.0.0"
   },
   "peerDependencies": {
     "flickity": "^2.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
-  "typings": "./src/index.d.ts"
+  "typings": "./dist/index.d.ts",
+  "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac"
 }

README.md

 React Flickity Component
 =======================
 
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-
 # Introduction:
@@ -19,2 +17,5 @@ A React.js Flickity component.
 
+## V5 Updates
+V5 supports react v19 and above. 
+
 ## V4 Updates
@@ -37,8 +38,8 @@ V4 only supports react v18 and above. V4 also comes with an esmodule bundle format to support modern frontend tooling like vite.
     <Flickity
-      className={'carousel'} // default ''
-      elementType={'div'} // default 'div'
-      options={flickityOptions} // takes flickity options {}
-      disableImagesLoaded={false} // default false
-      reloadOnUpdate // default false
-      static // default false
+      className={'carousel'}                
+      elementType={'div'}                   
+      options={flickityOptions}
+      disableImagesLoaded
+      reloadOnUpdate
+      static
     >
@@ -55,3 +56,3 @@ <img src="/images/placeholder.png"/>
 See a codesandbox example here:
-https://codesandbox.io/s/qlz12m4oj6
+https://codesandbox.io/s/react-flickity-demo-wwszqm
 
@@ -73,3 +74,3 @@ See an example with server side rendering:
 | `elementType`        | `String`   | `'div'` | Wrapper's element type                                        |
-| `options`            | `Object`   | `{}`    | Flickity initialization opions                                |
+| `options`            | `Object`   | `{}`    | Flickity initialization options                                |
 | `disableImagesLoaded`| `Boolean`  | `false` | Disable call `reloadCells` images are loaded                  |
@@ -84,5 +85,5 @@ | `flickityRef`        | `Function` |         | Like `ref` function, get Flickity instance in parent component|
 
-#64 introduced a new prop to change the underlying render method: instead of portal, react-flickity-component will directly render children. This is create a smoother server-side rendering experience, but **please be aware using `static` prop possibly will cause all your future update to fail,** which means adding/removing slides will definitely fail to render, so use with caution.
+[#64](https://github.com/yaodingyd/react-flickity-component/pull/64) introduced a new prop to change the underlying render method: instead of using portal, react-flickity-component will directly render children. This is to create a smoother server-side rendering experience, but **please be aware using `static` prop possibly will cause all your future update to fail,** which means adding/removing slides will definitely fail to render, so use with caution.
 
-However there is a fail-safe option `reloadOnUpdate`. It means every time there is a update, we tear down and set up Flickity. This will ensure that Flickity is always rendered correctly, but it's a rather costly operation and it will cause a flicker since DOM nodes are destroyed and recreated.
+However there is a fail-safe option `reloadOnUpdate`. It means every time there is a update, we tear down and set up Flickity. This will ensure that Flickity is always rendered correctly, but it's a rather costly operation and it **will cause a flicker** since DOM nodes are destroyed and recreated. Please also note it means any update, either rerender of the parent, or any of the props change, will always cause an update in the Flickity component. For more information, see a detailed explanation and workaround in [#147](https://github.com/yaodingyd/react-flickity-component/issues/147).
 
@@ -95,4 +96,29 @@
 ```javascript
+// function component
+function Carousel () {
+  const ref = React.useRef(null);
 
+  function myCustomNext = () {
+    // You can use Flickity API
+    ref.current.next()
+  }
 
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.on("settle", () => {
+        console.log(`current index is ${ref.current.selectedIndex}`);
+      });
+    }
+  }, []);
+
+  return (
+      <Flickity flickityRef={c => ref.current = c}>
+        <img src="/images/placeholder.png"/>
+        <img src="/images/placeholder.png"/>
+        <img src="/images/placeholder.png"/>
+      </Flickity>
+      <Button onClick={myCustomNext}>My custom next button</Button>
+    )
+}
+// class component
 class Carousel extends React.Component {
@@ -123,3 +149,2 @@
 }
-
 ```
@@ -126,0 +151,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

Dependency count

4

-20%

Number of lines in readme file

153

19.53%

Worsened metrics

Total package byte prevSize

28570

-13.89%

Dev dependency count

17

30.77%

Lines of code

129

-61.83%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  react@19.1.0
  (transitive)

• + Added

  react-dom@19.1.0
  (transitive)

• + Added

  scheduler@0.26.0
  (transitive)

• - Removed

  prop-types@^15.7.2

• - Removed

  js-tokens@4.0.0
  (transitive)

• - Removed

  loose-envify@1.4.0
  (transitive)

• - Removed

  object-assign@4.1.1
  (transitive)

• - Removed

  prop-types@15.8.1
  (transitive)

• - Removed

  react@18.3.1
  (transitive)

• - Removed

  react-dom@18.3.1
  (transitive)

• - Removed

  react-is@16.13.1
  (transitive)

• - Removed

  scheduler@0.23.2
  (transitive)