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