react-flickity-component
Advanced tools
Comparing version
@@ -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 | ||
======================= | ||
[](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
Major refactor
Supply chain riskPackage 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
4
-20%153
19.53%28570
-13.89%17
30.77%129
-61.83%1
Infinity%+ Added
+ Added
+ Added
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed
- Removed