<Handle />

The <Handle /> component is used in your custom nodes to define connection points.


import { Handle, Position } from '@xyflow/react';
 
export const CustomNode = ({ data }) => {
  return (
    <>
      <div style={{ padding: '10px 20px' }}>
        {data.label}
      </div>
 
      <Handle type="target" position={Position.Left} />
      <Handle type="source" position={Position.Right} />
    </>
  );
};

Props

For TypeScript users, the props type for the <Handle /> component is exported as HandleProps.

Name	Type	Default
`...props`	`Omit<ComponentProps<"div">, "id">`