react-flickity-component

by theolampert

A React.js component for using @desandro's Flickity

221 Stars 46 Forks Last release: Not found 125 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Flickity Component

Greenkeeper badge build status dependencies styled with prettier

Introduction:

A React.js Flickity component.

Install:

npm install react-flickity-component --save
// Or
yarn add react-flickity-component

Usage:

// Commonjs
const Flickity = require('flickity');
// Or for ES2015 module
import Flickity from 'react-flickity-component'

const flickityOptions = { initialIndex: 2 }

function Carousel() { return ( ) }

Example Usage:

See a codesandbox example here: https://codesandbox.io/s/qlz12m4oj6

See an example with server side rendering:

https://github.com/theolampert/react-flickity-component-example

And with typescript:

https://github.com/theolampert/react-flickity-component-example/tree/typescript

Props:

| Property | Type | Default | Description | | -------------------- | -----------| --------|---------------------------------------------------------------| |

className
|
String
|
''
| Applied to top level wrapper | |
elementType
|
String
|
'div'
| Wrapper's element type | |
options
|
Object
|
{}
| Flickity initialization opions | |
disableImagesLoaded
|
Boolean
|
false
| Disable call
reloadCells
images are loaded | |
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 it works

Under the hood, react-flickity-component uses a React Portal to render children slides inside a Flickity instance. The need for a 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 the Flickity instance with

flickityRef
prop just like
ref
, and use this instance to register events and use API.

class Carousel extends React.Component {

componentDidMount = () => { // You can register events in componentDidMount hook this.flkty.on('settle', () => { console.log(current index is ${this.flkty.selectedIndex}) }) }

myCustomNext = () => { // You can use Flickity API this.flkty.next() }

render() { return ( this.flkty = c}> My custom next button ) } }

License Information:

GPLv3

Flickity may be used in commercial projects and applications with the one-time purchase of a commercial license. http://flickity.metafizzy.co/license.html

See this issue for more information

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.