markerEnd not taking marker configs on the BaseEdge component

Question

Hi there I'm trying to set the markerEnd properties (width, height, color, type) on a BaseEdge but it says it only takes a string for the markerEnd property. According to the docs (found here) it says that the markerEnd and markerStart take a type string or a marker config. However in practice it's only allowing me to enter a string. Base Edge source code showing that it uses BaseEdgeProps. BaseEdgeProps source code that defines markerEnd as a string

Is there some other edge component I should be using that will allow me to set the marker end properties? Or is there some way to get the BaseEdge to accept the marker end properties?

You may have already come across this -- it looks like the docs are wrong/misleading: https://github.com/wbkd/react-flow/issues/3149 — Steve, Jun 23 '23 at 22:27

score 0 · Answer 1 · answered Jul 19 '23 at 08:21

I was struggling recently with a similar issue, here is a workaround which potentially can help:

Manually overriding the onConnect function with adding the end Marker:

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(addEndMarker(params), eds)),
    [setEdges]
  );

And here is the function to enhance the edge with an end marker:

export const addEndMarker = (edge) => ({
  ...edge,
  markerEnd: {
    type: MarkerType.ArrowClosed,
    width: 20,
    height: 20,
    color: "#b1b1b7",
  },
});

NOTE: tested for SmoothStepEdge

markerEnd not taking marker configs on the BaseEdge component

1 Answers1