test(examples): use new api for test examples

example/src/DragHandle/DragHandleNode.tsx

@@ -0,0 +1,33 @@
+import { memo, FC } from 'react';
+
+import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+const labelStyle = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const dragHandleStyle = {
+  display: 'inline-block',
+  width: 25,
+  height: 25,
+  backgroundColor: 'teal',
+  marginLeft: 5,
+  borderRadius: '50%',
+};
+
+const ColorSelectorNode: FC<NodeProps> = () => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
+      <div style={labelStyle}>
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

example/src/DragHandle/index.tsx

@@ -0,0 +1,29 @@
+import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
+
+import DragHandleNode from './DragHandleNode';
+
+const nodeTypes = {
+  dragHandleNode: DragHandleNode,
+};
+
+const initialNodes: Node[] = [
+  {
+    id: '2',
+    type: 'dragHandleNode',
+    dragHandle: '.custom-drag-handle',
+    style: { border: '1px solid #ddd', padding: '20px 40px' },
+    position: { x: 200, y: 200 },
+    data: null,
+  },
+];
+
+const initialEdges: Edge[] = [];
+
+const DragHandleFlow = () => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges] = useEdgesState(initialEdges);
+
+  return <ReactFlow nodes={nodes} onNodesChange={onNodesChange} edges={edges} nodeTypes={nodeTypes} />;
+};
+
+export default DragHandleFlow;