reactjsreact-flow

React flow renderer prevent specific node from being deleted


Is there a way to prevent a specific node from being deleted? I have set deleteKeyCode={'Delete'} but want to exclude a node by type from this.

    <ReactFlow
      nodes={nodes}
      edges={edges}
      onConnect={handleOnConnect}
      onDragOver={handleOnDragOver}
      onDrop={handleOnDrop}
      connectionLineComponent={ConnectionLine}
      onNodesChange={handleOnNodesChange}
      onConnectStart={() => dispatch(setIsConnecting(true))}
      onConnectStop={() => dispatch(setIsConnecting(false))}
      onEdgesChange={handleOnEdgesChange}
      onInit={setReactFlowInstance}
      deleteKeyCode={'Delete'}
      defaultZoom={1}
      nodeTypes={customNodeTypes}
      edgeTypes={customEdgeTypes}>
      <Background className={classes.flowBackground} />
      <Controls />
    </ReactFlow>

Solution

  • Instead of hard-coding the string 'Delete', use a variable who's value changes from a blank '' to 'Delete' depending on whether or not you want to exclude the node from deletion:

    const isDeleting = 'Yes' ? 'Delete' : '';

    deleteKeyCode={isDeleting}