embla-carousel-react.cjs.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. 'use strict';
  2. var react = require('react');
  3. var emblaCarouselReactiveUtils = require('embla-carousel-reactive-utils');
  4. var EmblaCarousel = require('embla-carousel');
  5. function useEmblaCarousel(options = {}, plugins = []) {
  6. const storedOptions = react.useRef(options);
  7. const storedPlugins = react.useRef(plugins);
  8. const [emblaApi, setEmblaApi] = react.useState();
  9. const [viewport, setViewport] = react.useState();
  10. const reInit = react.useCallback(() => {
  11. if (emblaApi) emblaApi.reInit(storedOptions.current, storedPlugins.current);
  12. }, [emblaApi]);
  13. react.useEffect(() => {
  14. if (emblaCarouselReactiveUtils.areOptionsEqual(storedOptions.current, options)) return;
  15. storedOptions.current = options;
  16. reInit();
  17. }, [options, reInit]);
  18. react.useEffect(() => {
  19. if (emblaCarouselReactiveUtils.arePluginsEqual(storedPlugins.current, plugins)) return;
  20. storedPlugins.current = plugins;
  21. reInit();
  22. }, [plugins, reInit]);
  23. react.useEffect(() => {
  24. if (emblaCarouselReactiveUtils.canUseDOM() && viewport) {
  25. EmblaCarousel.globalOptions = useEmblaCarousel.globalOptions;
  26. const newEmblaApi = EmblaCarousel(viewport, storedOptions.current, storedPlugins.current);
  27. setEmblaApi(newEmblaApi);
  28. return () => newEmblaApi.destroy();
  29. } else {
  30. setEmblaApi(undefined);
  31. }
  32. }, [viewport, setEmblaApi]);
  33. return [setViewport, emblaApi];
  34. }
  35. useEmblaCarousel.globalOptions = undefined;
  36. module.exports = useEmblaCarousel;
  37. //# sourceMappingURL=embla-carousel-react.cjs.js.map