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
Book a DemoInstallSign in

react-flickity-component

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-flickity-component - npm Package Compare versions

Comparing version

3.3.0
to
3.3.1

22

package.json
{
"name": "react-flickity-component",
"version": "3.3.0",
"version": "3.3.1",
"description": "react flickity component",

@@ -26,3 +26,3 @@ "main": "./lib/index.js",

"fbjs": "^1.0.0",
"flickity": "^2.2.0",
"flickity": "^2.2.1",
"imagesloaded": "^4.1.4",

@@ -32,17 +32,17 @@ "prop-types": "^15.7.2"

"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-jest": "^24.8.0",
"babel-plugin-add-module-exports": "^1.0.2",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0",
"prettier": "^1.17.0",
"sinon": "^7.3.2"
"prettier": "^1.18.2",
"sinon": "^7.4.1"
},
"peerDependencies": {
"react": "~16.0.0",
"react-dom": "~16.0.0"
"react": "^16.0.0",
"react-dom": "^16.0.0"
},

@@ -49,0 +49,0 @@ "jest": {

28

README.md

@@ -9,6 +9,6 @@ React Flickity Component

#### Introduction:
# Introduction:
A React.js Flickity component.
#### Install:
# Install:

@@ -21,3 +21,3 @@ ```shell

#### Usage:
# Usage:

@@ -52,3 +52,3 @@ ```javascript

```
#### Example usage:
### Example Usage:
See a codesandbox example here:

@@ -60,3 +60,3 @@ https://codesandbox.io/s/qlz12m4oj6

#### Props:
### Props:

@@ -69,9 +69,17 @@ | Property | Type | Default | Description |

| `disableImagesLoaded`| `Boolean` | `false` | Disable call `reloadCells` images are loaded |
| `reloadOnUpdate` | `Boolean` | `false` | Run `reloadCells` and `resize` on `componentDidUpdate` |
| `static` | `Boolean` | `false` | Carousel contents are static and not updated at runtime. Useful for smoother server-side rendering however the carousel contents cannot be updated dynamically. |
| `flickityRef` | `Function` | | like `ref` function, get Flickity instance in parent component|
| `flickityRef` | `Function` | | Like `ref` function, get Flickity instance in parent component|
| `reloadOnUpdate` | `Boolean` | `false` | **Read next section before you set this prop.** Run `reloadCells` and `resize` on `componentDidUpdate` |
| `static` | `Boolean` | `false` | **Read next section before you set this prop.** Carousel contents are static and not updated at runtime. Useful for smoother server-side rendering however the carousel contents cannot be updated dynamically. |
### How Does It Work
#### Use Flickity's API and events
Under the hood, react-flickity-component uses [portal](https://reactjs.org/docs/portals.html) to render children slides inside Flickity instance. The need for portal is because after Flickity is initialized, new DOM nodes(mostly Flickity wrapper elements) would be created, this changes the DOM hierarchy of the parent component, thus any future update, whether it's originated from Flickity, like adding/removing slides, or from parent, like a prop changes, will make React fail to reconcile for the DOM snapshot is out of sync.
#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.
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.
### Use Flickity's API and events
You can access Flickity instance with `flickityRef` prop just like `ref`, and use this instance to register events and use API.

@@ -111,3 +119,3 @@

#### License Information:
# License Information:
[GPLv3](https://www.gnu.org/licenses/gpl-3.0.html)

@@ -114,0 +122,0 @@

2

src/index.d.ts

@@ -7,3 +7,3 @@ import React, { Component } from "react";

elementType?: string;
flickityRef?: (ref: HTMLDivElement) => void;
flickityRef?: (ref: Flickity) => void;
options?: FlickityOptions;

@@ -10,0 +10,0 @@ reloadOnUpdate?: boolean;