Disable/hide handles on nodes

[S0PEX]

Hey,

currently using React Flow to render a relationship graph between companies.
By default, React Flow will show / render handles as black circles on the node.
i.e.:

Is there a way to turn off the handles so that I just get the edges (lines) and vertices (nodes)?

Regards S0PEX

[bcakmakoglu]

The handles are necessary for edges to find their targets, but you can just set the opacity to 0 and hide the circles themselves.
This can be seen in the Floating Edges example.

All you need to do is add this to your css

.react-flow__handle {
  opacity: 0;
}

[S0PEX]

@bcakmakoglu Thank you very much.

[Pankaj-birla]

@bcakmakoglu Can I hide the handle and the circles on the switch changes ? Like in switch on both visible and in off it will be hidden.

Here is the sample code:
<Handle
type="source"
position={Position.Left}
id="left"
style={{ background: "#555", visibility: data.isDesignMode ? 'visible' : 'hidden'}}
/>
in this suitation the visibility is on the switch(isDesignMode), but when the switch on the circles are visible, I want that only at the time of hover the nodes, the circle/handle appears. Is their any way?

[bcakmakoglu]

Yes you can but use opacity to do it instead of visibility

[ZakKa89]

But what about the spacing the handler still has? I tried to have a height and width of 0 but that doesn't work. I want the arrow to connect to the node without spacing.

[moklick]

The easiest way would be to overwrite the handle styles for .react-flow__handle.top and .react-flow__handle.bottom

[bcakmakoglu]

Yeah just use top: 0 and you shouldn't be seeing these spacings

[vivek-quest]

import React from 'react'
import { BaseEdge, getSmoothStepPath } from 'reactflow'

export default function Basic({
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style = {},
    markerEnd,
    selected,
    target,
    source,
}) {
    const [edgePath, labelX, labelY] = getSmoothStepPath({
        sourceX,
        sourceY,
        sourcePosition,
        targetX,
        targetY,
        targetPosition,
        centerX: 0,
        centerY: 0
    });
      
    return (
        <>
            <BaseEdge
                path={edgePath} 
                
                markerEnd={markerEnd} 
                style={{stroke: 'var(--Text-Disabled, #535353)'}}
            />
        </>
    )
}

You can provide centerX and centerY where edge should end

[wderocco8]

The top: 0 alone only fixed the spacing for me on the top of the edges, to remove all of the spacing I did this (though perhaps @vivek-quest solution does not require this if you are creating custom edges):

.floating-edges .react-flow__handle {
  opacity: 0;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

PS: I also agree strongly that this should be an optional built-in prop

[nguyenlephong]

https://reactflow.dev/api-reference/components/handle#notes
If you need to hide a handle for some reason, you must use visibility: hidden or opacity: 0 instead of display: none. This is important because React Flow needs to calculate the dimensions of the handle to work properly and using display: none will report a width and height of 0!

[esla-ahme]

A solution that worked for me well is creating custom node and adding span on and positioning it in the top of the handle using absolute, top, right and z-index css properties

[VivaLaPanda]

This should really just be a default option... Seems like a very common desire and this fix feels pretty hacky