Updated Readme.md

README.md

@@ -27,9 +27,11 @@ Features:
 
 ## Usage
 
-### HTML
+### HTML/JavaScript
 
 ```JavaScript
+<div id="timeline"></div>
+<script type="text/javascript">
    let rows = [
       {
         keyframes: [
@@ -45,6 +47,7 @@ Features:
     let timeline = new timelineModule.Timeline({id:'timeline'})
 
     timeline.setModel({ rows: rows });
+</script>
 ```
 
 ### Angular
@@ -68,6 +71,56 @@ const options = {
 const timeline = new Timeline(options, model);
 ```
 
+### React
+
+```TypeScript
+import React, { useEffect, useRef, useState } from 'react';
+import { Timeline, TimelineModel } from 'animation-timeline-js';
+type Props = {
+  time: number;
+  model: TimelineModel;
+};
+
+function TimelineComponent(props: Props) {
+  const { model, time } = props;
+  const timelineElRef = useRef<HTMLDivElement>(null);
+  const [timeline, setTimeline] = useState<Timeline>();
+
+  useEffect(() => {
+    let newTimeline: Timeline | null = null;
+    // On component init
+    if (timelineElRef.current) {
+      newTimeline = new Timeline({ id: timelineElRef.current });
+      // Here you can subscribe on timeline component events
+      setTimeline(newTimeline);
+    }
+
+    // cleanup on component unmounted.
+    return () => {
+      timeline?.dispose();
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Example to subscribe and pass model or time update:
+  useEffect(() => {
+    if (timeline) {
+      timeline.setModel(model);
+    }
+  }, [model, timeline]);
+
+  // Example to subscribe and pass model or time update:
+  useEffect(() => {
+    if (timeline) {
+      timeline.setTime(time);
+    }
+  }, [time, timeline]);
+
+  return <div ref={timelineElRef} />;
+}
+export default TimelineComponent;
+```
+
 ### Outline list
 
 Outline list\tree can implemented as a separate HTML component and synchronized with the timeline.
@@ -156,6 +209,12 @@ Styles can be applied on a few levels:
 
 Styles are applied by a global settings and can be overridden by a row or keyframe style.
 
+## Debug component
+
+VsCode configuration is included to the configuration,
+so you can navigate to the debug window and click 'Launch Debug File'.
+Put breakpoint in any typescript file and trigger function from the browser.
+
 ## Changes
 
 ## > 2.0