JavaScript
Clone or download
theolampert Merge pull request #39 from theolampert/greenkeeper/sinon-6.0.0
Update sinon to the latest version 🚀
Latest commit ef474e5 Jun 12, 2018

README.md

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 (
    <Flickity
      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"/>
    </Flickity>
  )
}

Example usage:

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

cd examples/react-flickity
yarn
yarn start

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
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
    this.flkty.next()
  }

  render() {
    return (
      <Flickity flickityRef={c => this.flkty = 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>
    )
  }
}

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