Switch branches/tags
Nothing to show
Latest commit 592d303 Mar 11, 2018

React Flickity Component

Greenkeeper badge build status dependencies styled with prettier


A React.js Flickity component.


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


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

const flickityOptions = {
    initialIndex: 2

function Carousel() {
  return (
      className={'carousel'} // default ''
      elementType={'div'} // default 'div'
      options={flickityOptions} // takes flickity options {}
      disableImagesLoaded={false} // default false
      reloadOnUpdate // default false
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>

Example usage:

The examples folder contains an example use with create-react-app.

cd examples/react-flickity
yarn start


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
reloadOnUpdate Boolean false Run reloadCells and resize on componentDidUpdate
flickityRef Function like ref function, get Flickity instance in parent component

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.

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

  render() {
    return (
      <Flickity flickityRef={c => this.flkty = c}>
        <img src="/images/placeholder.png"/>
        <img src="/images/placeholder.png"/>
        <img src="/images/placeholder.png"/>
      <Button onClick={myCustomNext}>My custom next button</Button>

License Information:


Flickity may be used in commercial projects and applications with the one-time purchase of a commercial license.