You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-flickity-component

Package Overview
Dependencies
Maintainers
2
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-flickity-component - npm Package Compare versions

Comparing version

to
5.0.0

dist/index.d.ts

102

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

@@ -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
{
"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"
}
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 @@

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet