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 (

<div
data-anchor="page-1"
id="page-1"
className="pg-page"
style={{
backgroundColor: "peachpuff"
}}
>

<div
data-anchor="page-2"
className="pg-page"
style={{
backgroundColor: "cornflowerblue"
}}
>
<div
data-anchor="page-3"
className="pg-page"
style={{
backgroundColor: "bisque"
}}
>
<div
data-anchor="page-4"
className="pg-page"
style={{
backgroundColor: "mediumaquamarine"
}}
>

    <div
      className="linear-progress"
      style={{
        position: "fixed",
        top: "0px",
        left: "10px",
        width: "calc(100vw - 20px)",
        height: "2px"
      }}
    >
      <div
        className="bar"
        style={{
          position: "absolute",
          top: "0",
          left: "0",
          width: "100%",
          height: "100%",
          backgroundColor: "#84e8ff",
          transformOrigin: "0 0 0"
        }}
        ref={linearProgressBarRef}
      ></div>
    </div>
  </main>
</Container>

);
};

export default game;