React

First, follow the installation instructions to add the NPM package @fancyapps/ui.

Use the useCarousel hook sample code or create your own wrapper based on it:

useCarousel.js

import { useRef, useState, useCallback, useEffect } from "react";

import { Carousel } from "@fancyapps/ui/dist/carousel/";
import "@fancyapps/ui/dist/carousel/carousel.css";

import { canUseDOM } from "@fancyapps/ui/dist/utils/canUseDOM.js";
import { isEqual } from "@fancyapps/ui/dist/utils/isEqual.js";

export default function useCarousel(options = {}) {
  const storedOptions = useRef(options);

  const [container, setContainer] = useState(null);
  const [carouselInstance, setCarouselInstance] = useState(undefined);

  const reInit = useCallback(() => {
    if (carouselInstance) {
      carouselInstance.destroy().init();
    }
  }, [carouselInstance]);

  useEffect(() => {
    if (!isEqual(options, storedOptions.current)) {
      storedOptions.current = options;
      reInit();
    }
  }, [options, reInit]);

  useEffect(() => {
    if (canUseDOM() && container) {
      const newCarouselInstance = Carousel(
        container,
        storedOptions.current
      ).init();

      setCarouselInstance(newCarouselInstance);

      return () => {
        newCarouselInstance.destroy();
      };
    } else {
      setCarouselInstance(undefined);
    }
  }, [container]);

  return [setContainer, carouselInstance];
}

useCarousel.ts

import { useRef, useState, useCallback, useEffect } from "react";

import {
  type CarouselOptions,
  type CarouselInstance,
  Carousel,
} from "@fancyapps/ui/dist/carousel/";
import "@fancyapps/ui/dist/carousel/carousel.css";

import { canUseDOM } from "@fancyapps/ui/dist/utils/canUseDOM.js";
import { isEqual } from "@fancyapps/ui/dist/utils/isEqual.js";

export type CarouselContainerRefType = <ContainerElement extends HTMLElement>(
  el: ContainerElement | null
) => void;

export type useCarousel = [
  CarouselContainerRefType,
  CarouselInstance | undefined
];

export default function useCarousel(
  options: Partial<CarouselOptions> = {}
): useCarousel {
  const storedOptions = useRef(options);

  const [container, setContainer] = useState<HTMLElement | null>(null);
  const [carouselInstance, setCarouselInstance] = useState<
    CarouselInstance | undefined
  >(undefined);

  const reInit = useCallback(() => {
    if (carouselInstance) {
      carouselInstance.destroy().init();
    }
  }, [carouselInstance]);

  useEffect(() => {
    if (!isEqual(options, storedOptions.current)) {
      storedOptions.current = options;
      reInit();
    }
  }, [options, reInit]);

  useEffect(() => {
    if (canUseDOM() && container) {
      const newCarouselInstance = Carousel(
        container,
        storedOptions.current
      ).init();

      setCarouselInstance(newCarouselInstance);

      return () => {
        newCarouselInstance.destroy();
      };
    } else {
      setCarouselInstance(undefined);
    }
  }, [container]);

  return [setContainer, carouselInstance];
}

Usage:

function App() {
  const [carouselRef] = useCarousel({
    // Your custom options
  });

  return (
    <div ref={carouselRef}>
      <div className="f-carousel__slide">1</div>
      <div className="f-carousel__slide">2</div>
      <div className="f-carousel__slide">3</div>
    </div>
  );
}

Here is a sample of how to access the Carousel API:

const [carouselRef, caruselInstance] = useCarousel({
  // Your custom options
});

useEffect(() => {
  if (caruselInstance) {
    // Access API
    console.log(caruselInstance.getSlides());
  }
}, [caruselInstance]);