web icon indicating copy to clipboard operation
web copied to clipboard

Add proper marker usage description in documentation

Open maliyshock opened this issue 6 months ago • 1 comments

Code of Conduct

Which site are you suggesting a change for?

reactflow.dev

What content is affected by this change?

https://reactflow.dev/examples/edges/markers and https://reactflow.dev/examples/edges/custom-edges and https://reactflow.dev/api-reference/components/base-edge

What part(s) of the article would you like to see updated?

So basically there might be a case of customer edge with custom marker. So we need an example of BaseEdge component for this case

Right now it says: "markerEnd | stringThe id of the SVG marker to use at the end of the edge. This should be defined in a element in a separate SVG document or element."

But it is not exactly the truth, because if you put just an id it will not work. These examples will not work: <BaseEdge id={id} markerEnd="#marker" path={edgePath} style={{ strokeWidth: "4px" }} /> <BaseEdge id={id} markerEnd="marker" path={edgePath} style={{ strokeWidth: "4px" }} />

Instead you have to use "url(#marker)" in markerEnd prop. This will work

<BaseEdge id={id} markerEnd="url(#marker)" path={edgePath} style={{ strokeWidth: "4px" }} />

Additional information

No response

maliyshock avatar Aug 20 '24 18:08 maliyshock