Using with react

[stevenKirill]

Hello! Can I use this component timeline with React.js library?

[stevenKirill]

I tried to use this library with react and got this error, could anybody help me please?

I guess it's coz of peer dependencies

[RunRanger]

I'm using vis-timeline in my react-project without any problems. Moment.js is just a dependency and hasn't to be listed in your package.json file. It should be installed automatically by vis-timeline itself if you're using a normal packetmangager like npm. Just try to uninstall and install vis-timeline again.

[stevenKirill]

Could you share your code example please? How did you use it in react.js please

[RunRanger]

I just see it now, you have to import from 'vis-timeline/standalone' and not 'vis-timeline'. if you use any interfaces for typescript you can use 'vis-timeline'.

My code:

import { useRef, useEffect } from "react";
import {
  Timeline as Vis,
  TimelineEventPropertiesResult,
} from "vis-timeline/standalone";
import createOptions from "./createOptions";
import MusicMetaData from "@types/MusicMetaData";

interface Props {
  musicData: MusicMetaData,
  onChangePosition: (positionInPercent: number) => void,
}

function Timeline({ musicData, onChangePosition }: Props) {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const timelineRef = useRef<Vis | null>(null);

  const initTimeline = () => {
    if (!containerRef.current) return;
    timelineRef.current = new Vis(
      containerRef.current,
      [],
      [],
      createOptions({ musicData })
    );
    const timeline = timelineRef.current;
    timeline.addCustomTime(new Date(1920, 0, 1));
    timeline.setCustomTimeTitle("0:0");
    timeline.on("timechange", onTimeChange);
    timeline.on("click", onTimeChange);
  };

  const onTimeChange = (event: TimelineEventPropertiesResult) => {
    const time =
      event.time.getMinutes() * 60 +
      event.time.getSeconds() +
      event.time.getMilliseconds() / 1000;
    onChangePosition((time / musicData.duration) * 100);
  };

  useEffect(() => {
    if (!timelineRef.current) initTimeline();
  }, [containerRef]);

  return <div ref={containerRef} />;
}

export default Timeline;

[stevenKirill]

Great, Could you also send the implementation of createOptions and onChangePosition functions , I would like to understand how does this change your timeline

[RunRanger]

onChangePosition is not relevant for vis or react. It's just a function as property to provide the position of the customMarker to other compontents/outer states. CreateOptions is just a function which returns the vis-options like you can see in any other sample from offical vis-homepage.

[stevenKirill]

Great, thank you very much) can you show me please the final version if it please?

[KratosHome]

With this approach, writing and receiving to the state does not work. setState gets when exiting option

[RunRanger]

we can't do anything without exact error message and with the code snippet. We need more to help you.