Advanced Guides
Loop Zone Overlay
Visual indicator and interaction layer for repeat regions.
The LoopZoneOverlay is a visual indicator that renders a draggable repeat region on top of your timeline. It helps users define and understand which section of the timeline is currently looping.
Usage
The LoopZoneOverlay component is mounted as a sibling to the <Timeline /> and resides in the same relative container. It requires matching geometry configuration (scale, scaleWidth, startLeft) to align properly.
import React, { useState } from "react";
import { Timeline, LoopZoneOverlay } from "@keplar-404/react-timeline-editor";
export const EditorLoopZone = () => {
const [loopOn, setLoopOn] = useState(true);
const [loopStart, setLoopStart] = useState(2);
const [loopEnd, setLoopEnd] = useState(8);
const [scrollLeft, setScrollLeft] = useState(0);
// Constants MUST match between components
const scale = 1;
const scaleWidth = 160;
const startLeft = 20;
return (
<div style={{ position: "relative", width: "100%", height: "400px" }}>
<Timeline
scale={scale}
scaleWidth={scaleWidth}
startLeft={startLeft}
onScroll={(p) => setScrollLeft(p.scrollLeft)}
style={{ width: "100%", height: "100%" }}
/>
{loopOn && (
<LoopZoneOverlay
scale={scale}
scaleWidth={scaleWidth}
startLeft={startLeft}
scrollLeft={scrollLeft}
loopStart={loopStart}
loopEnd={loopEnd}
onLoopStartChange={setLoopStart}
onLoopEndChange={setLoopEnd}
config={{
bandColor: "#10b981",
bandOpacity: 0.1,
bandBorderColor: "#059669",
handleColor: "#10b981",
showBoundaryLines: true,
boundaryLineColor: "rgba(16, 185, 129, 0.4)",
}}
/>
)}
</div>
);
};Key Features
- Draggable Handles: Users can drag the edges of the loop zone to resize it directly on the timeline.
- Visual Feedback: Provides a shaded background area for the active loop range.
- Boundary Lines: Dashed vertical lines help align action blocks within the loop content.
- Customizable: Use the
renderHandleprop to return your own React nodes for the drag handles.
Combine the LoopZoneOverlay with the TransportBar loop controls for a
full, professional editing experience.