Possible to use with React?

[nikulasoskarsson]

Hello do you know if it's possible to use this within a react app and if so how? I have tried integrating it in a few different ways but it does not seem to work.

[anmoldh121]

You can use it with react make a pageable instance with useRef() and store pageable object in useEffect() and the rest is same.

[okinawaa]

const game = () => { const containerRef = useRef(null); const linearProgressBarRef = useRef(null); const pageableRef = useRef(null);

const loadPageable = async () => { const Pageable = (await import("pageable")).default; const pageable = new Pageable(containerRef.current, { childSelector: "[data-anchor]", anchors: [], pips: true, animation: 600, delay: 600, throttle: 50, orientation: "vertical" as "vertical" | "horizontal", swipeThreshold: 50, freeScroll: false, navPrevEl: false, navNextEl: false, infinite: false, events: { wheel: true, mouse: true, touch: true, keydown: true }, easing: (currentTime: any, startPos: any, endPos: any, interval: any) => { return ( -endPos (currentTime /= interval) (currentTime - 2) + startPos ); }, onScroll: (data: any) => {} // onInit: () => {}, // onUpdate: (data) => {} // onBeforeStart: () => {}, // onStart: () => {}, // onFinish: () => {} });

pageableRef.current = pageable;

};

useEffect(() => { loadPageable(); }, []);

return (

); };

export default game;