web
web copied to clipboard
Add proper marker usage description in documentation
Code of Conduct
- [X] I have read and agree to the xyflow contributor 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
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