{"id":17033295,"url":"https://github.com/yaodingyd/react-flickity-component","last_synced_at":"2025-05-14T20:08:39.056Z","repository":{"id":43635577,"uuid":"46984018","full_name":"yaodingyd/react-flickity-component","owner":"yaodingyd","description":"A React.js component for using @desandro's Flickity","archived":false,"fork":false,"pushed_at":"2025-01-02T20:41:53.000Z","size":941,"stargazers_count":313,"open_issues_count":6,"forks_count":50,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T20:38:36.346Z","etag":null,"topics":["carousel","carousel-component","flickity","react","slider"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yaodingyd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-11-27T14:21:21.000Z","updated_at":"2025-03-29T20:10:26.000Z","dependencies_parsed_at":"2024-06-18T12:42:06.968Z","dependency_job_id":"0b72e4cd-97f3-4156-a202-a06b065aef05","html_url":"https://github.com/yaodingyd/react-flickity-component","commit_stats":{"total_commits":146,"total_committers":29,"mean_commits":"5.0344827586206895","dds":0.5616438356164384,"last_synced_commit":"085792ac14fcea67afad5a163a8145a5ba603ef2"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaodingyd%2Freact-flickity-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaodingyd%2Freact-flickity-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaodingyd%2Freact-flickity-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yaodingyd%2Freact-flickity-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yaodingyd","download_url":"https://codeload.github.com/yaodingyd/react-flickity-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254219373,"owners_count":22034397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","carousel-component","flickity","react","slider"],"created_at":"2024-10-14T08:33:39.257Z","updated_at":"2025-05-14T20:08:39.019Z","avatar_url":"https://github.com/yaodingyd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"React Flickity Component\n=======================\n\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n# Introduction:\nA React.js Flickity component.\n\n# Install:\n\n```shell\n# you need to install flickity as peer dependency, please use v2.3.0 for best experience\nnpm install flickity@2.3.0\nnpm install react-flickity-component\n```\n\n# Usage:\n\n## V4 Updates\nV4 only supports react v18 and above. V4 also comes with an esmodule bundle format to support modern frontend tooling like vite.\nIf you are staying on react v16, please keep using v3. \n\n```javascript\n// Commonjs\nconst Flickity = require('react-flickity-component');\n// Or for ES2015 module\nimport Flickity from 'react-flickity-component'\n\nconst flickityOptions = {\n    initialIndex: 2\n}\n\nfunction Carousel() {\n  return (\n    \u003cFlickity\n      className={'carousel'}                \n      elementType={'div'}                   \n      options={flickityOptions}\n      disableImagesLoaded\n      reloadOnUpdate\n      static\n    \u003e\n      \u003cimg src=\"/images/placeholder.png\"/\u003e\n      \u003cimg src=\"/images/placeholder.png\"/\u003e\n      \u003cimg src=\"/images/placeholder.png\"/\u003e\n    \u003c/Flickity\u003e\n  )\n}\n\n```\n### Example Usage:\nSee a codesandbox example here:\nhttps://codesandbox.io/s/react-flickity-demo-wwszqm\n\nSee an example with server side rendering:\n\nhttps://github.com/theolampert/react-flickity-component-example\n\nAnd with typescript:\n\nhttps://github.com/theolampert/react-flickity-component-example/tree/typescript\n\n\n### Props:\n\n| Property             | Type       | Default | Description                                                   |\n| -------------------- | -----------| --------|---------------------------------------------------------------|\n| `className`          | `String`   | `''`    | Applied to top level wrapper                                  |\n| `elementType`        | `String`   | `'div'` | Wrapper's element type                                        |\n| `options`            | `Object`   | `{}`    | Flickity initialization options                                |\n| `disableImagesLoaded`| `Boolean`  | `false` | Disable call `reloadCells` images are loaded                  |\n| `flickityRef`        | `Function` |         | Like `ref` function, get Flickity instance in parent component|\n| `reloadOnUpdate`     | `Boolean`  | `false` | **Read next section before you set this prop.** Run `reloadCells` and `resize` on `componentDidUpdate`        |                      \n| `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.   |  \n\n### How it works\n\nUnder the hood, react-flickity-component uses a [React Portal](https://reactjs.org/docs/portals.html) 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. \n\n[#64](https://github.com/yaodingyd/react-flickity-component/pull/64) introduced a new prop to change the underlying render method: instead of using portal, react-flickity-component will directly render children. This is to 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.\n\nHowever 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. Please also note it means any update, either rerender of the parent, or any of the props change, will always cause an update in the Flickity component. For more information, see a detailed explanation and workaround in [#147](https://github.com/yaodingyd/react-flickity-component/issues/147).\n\n\n### Use Flickity's API and events\n\nYou can access the Flickity instance with `flickityRef` prop just like `ref`, and use this instance to register events and use API.\n\n```javascript\n// function component\nfunction Carousel () {\n  const ref = React.useRef(null);\n\n  function myCustomNext = () {\n    // You can use Flickity API\n    ref.current.next()\n  }\n\n  React.useEffect(() =\u003e {\n    if (ref.current) {\n      ref.current.on(\"settle\", () =\u003e {\n        console.log(`current index is ${ref.current.selectedIndex}`);\n      });\n    }\n  }, []);\n\n  return (\n      \u003cFlickity flickityRef={c =\u003e ref.current = c}\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n      \u003c/Flickity\u003e\n      \u003cButton onClick={myCustomNext}\u003eMy custom next button\u003c/Button\u003e\n    )\n}\n// class component\nclass Carousel extends React.Component {\n\n  componentDidMount = () =\u003e {\n    // You can register events in componentDidMount hook\n    this.flkty.on('settle', () =\u003e {\n      console.log(`current index is ${this.flkty.selectedIndex}`)\n    })\n  }\n\n  myCustomNext = () =\u003e {\n    // You can use Flickity API\n    this.flkty.next()\n  }\n\n  render() {\n    return (\n      \u003cFlickity flickityRef={c =\u003e this.flkty = c}\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n        \u003cimg src=\"/images/placeholder.png\"/\u003e\n      \u003c/Flickity\u003e\n      \u003cButton onClick={myCustomNext}\u003eMy custom next button\u003c/Button\u003e\n    )\n  }\n}\n```\n\n\n# License Information:\n[GPLv3](https://www.gnu.org/licenses/gpl-3.0.html)\n\nFlickity may be used in commercial projects and applications with the one-time purchase of a commercial license.\nhttp://flickity.metafizzy.co/license.html\n\nSee [this issue](https://github.com/theolampert/react-flickity-component/issues/23#issuecomment-493294512) for more information\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaodingyd%2Freact-flickity-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaodingyd%2Freact-flickity-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaodingyd%2Freact-flickity-component/lists"}