Nondeterministic Polynomial Munchies

    react-flickity-component
    TypeScript icon, indicating that this package has built-in type declarations

    3.6.2 • Public • Published

    React Flickity Component

    Greenkeeper badge 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 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 (
          <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

    See this issue for more information

    Install

    npm i react-flickity-component

    DownloadsWeekly Downloads

    14,094

    Version

    3.6.2

    License

    GPL3

    Unpacked Size

    38.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • theolll
    • yaodingyd