npm

Check out our latest tech talk, "JavaScript Supply Chain Security" presented by VP of Security, Adam Baldwin.Watch it here »

react-flickity-component

3.3.0 • Public • Published

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
      static // default false
    >
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
    </Flickity>
  )
}
 

Example usage:

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

See an example in production with server side rendering here

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
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

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

install

npm i react-flickity-component

Downloadsweekly downloads

5,019

version

3.3.0

license

GPL3

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability