- Zero-dependencies
- 12 kB bundle size
const Diagram = () => {
return (
<>
<div id="block1"></div>
<div id="block2"></div>
<Arrow start="block1" end="block2"/>
</>
);
}
const App = () => {
return (
<LineContextProvider>
<Diagram />
</LineContextProvider>
)
}
Arrow Property | Type | Property in LineContextProvider
|
---|---|---|
start |
React.RefObject<HTMLElement> | string (block id) |
- |
end |
React.RefObject<HTMLElement> | string (block id) |
- |
color |
string |
color |
scale |
number |
scale |
curviness |
number |
curviness |
strokeWidth |
number |
strokeWidth |
onlyIntegerCoords |
boolean |
onlyIntegerCoords |
useRegister |
boolean |
useRegister |
withHead |
boolean |
withHead |
headSize |
number |
headSize |
headColor |
string |
headColor |
className |
string |
arrowClassName |
onClick |
MouseEventHandler |
- |
onHover |
MouseEventHandler |
- |
label |
JSX.Element |
- |
Marker |
MarkerPropsType |
- |
offsetStartX |
number |
offsetStartX |
offsetStartY |
number |
offsetStartY |
offsetEndX |
number |
offsetEndX |
offsetEndY |
number |
offsetEndY |
type MarkerPropsType = {
id: string;
size?: number;
color?: string;
};
LineContextProvider
allows to set some properties for all arrows in it at once.
- It is needed to increase FPS due to a temporary decrease in rendering quality
- Default delay:
400 ms
- Based on
shape-rendering: optimizeSpeed
[MDN]
const { reducedClassName, reduceSVG } = useReducedGraphics();
const someAction = () => {
...
reduceSVG();
}
return (
<LineContextProvider arrowClassName={reducedClassName}>
... // arrows and other content
</LineContextProvider>
);
Some operations like scaling or moving whole space can cause a small recalculation of the coordinates of the arrows with an accuracy of up to one thousandth. And onlyIntegerCoords
can reduce the load. But at high magnification, this can cause unpleasant twitching of the lines.
This feature is hidden behind the property useRegister
, as it requires a little extra memory.
After enabling, you can pass the HTML element corresponding to the start
or end
of the arrow to the update function.
Example
Made with react-draggable
.
const Diagram = () => {
const { update } = useLineContext();
const handleUpdate = (mouseEvent, dragEvent) => {
update(dragEvent.node);
};
return (
<>
<Draggable
onDrag={handleUpdate}
onStart={handleUpdate}
onStop={handleUpdate}
>
<div id="block1"></div>
</Draggable>
<Draggable
onDrag={handleUpdate}
onStart={handleUpdate}
onStop={handleUpdate}
>
<div id="block2"></div>
</Draggable>
<Arrow start="block1" end="block2"/>
</>
);
}
const App = () => {
return (
<LineContextProvider>
<Diagram />
</LineContextProvider>
)
}