-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
/
CustomNode.tsx
36 lines (31 loc) · 1.05 KB
/
CustomNode.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React, { memo, FC, useMemo, CSSProperties, useState } from 'react';
import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'react-flow-renderer';
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
const CustomNode: FC<NodeProps> = ({ id }) => {
const [handleCount, setHandleCount] = useState(1);
const updateNodeInternals = useUpdateNodeInternals();
const handles = useMemo(
() =>
Array.from({ length: handleCount }, (x, i) => {
const handleId = `handle-${i}`;
return <Handle key={handleId} type="source" position={Position.Right} id={handleId} style={{ top: 10 * i }} />;
}),
[handleCount]
);
return (
<div style={nodeStyles}>
<Handle type="target" position={Position.Left} />
<div>output handle count: {handleCount}</div>
<button
onClick={() => {
setHandleCount((c) => c + 1);
updateNodeInternals(id);
}}
>
add handle
</button>
{handles}
</div>
);
};
export default memo(CustomNode);