npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-flickity-component

v4.0.7

Published

react flickity component

Downloads

70,633

Readme

React Flickity Component

styled with prettier

Introduction:

A React.js Flickity component.

Install:

# you need to install flickity as peer dependency, please use v2.3.0 for best experience
npm install [email protected]
npm install react-flickity-component

Usage:

V4 Updates

V4 only supports react v18 and above. V4 also comes with an esmodule bundle format to support modern frontend tooling like vite. If you are staying on react v16, please keep using v3.

// Commonjs
const Flickity = require('react-flickity-component');
// 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