embla-carousel-react.esm.js 1.4 KB

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