Custom Node Source Code
ColorSelectorNode.js
import React, { memo } from 'react';
import { Handle } from 'react-flow-renderer';
export default memo(({ data }) => {
return (
<>
<Handle
type="target"
position="left"
style={{ background: '#555' }}
onConnect={(params) => console.log('handle onConnect', params)}
/>
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
</div>
<input
className="nodrag"
type="color"
onChange={data.onChange}
defaultValue={data.color}
/>
<Handle
type="source"
position="right"
id="a"
style={{ top: 10, background: '#555' }}
/>
<Handle
type="source"
position="right"
id="b"
style={{ bottom: 10, top: 'auto', background: '#555' }}
/>
</>
);
});
index.js
import React, { useState, useEffect } from 'react';
import ReactFlow, {
isEdge,
removeElements,
addEdge,
MiniMap,
Controls,
} from 'react-flow-renderer';
import ColorSelectorNode from './ColorSelectorNode';
import './index.css';
const onLoad = (reactFlowInstance) => {
console.log('flow loaded:', reactFlowInstance);
setTimeout(() => reactFlowInstance.fitView(), 1);
};
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
const initBgColor = '#1A192B';
const connectionLineStyle = { stroke: '#fff' };
const snapGrid = [20, 20];
const nodeTypes = {
selectorNode: ColorSelectorNode,
};
const CustomNodeFlow = () => {
const [elements, setElements] = useState([]);
const [bgColor, setBgColor] = useState(initBgColor);
useEffect(() => {
const onChange = (event) => {
setElements((els) =>
els.map((e) => {
if (isEdge(e) || e.id !== '2') {
return e;
}
const color = event.target.value;
setBgColor(color);
return {
...e,
data: {
...e.data,
color,
},
};
})
);
};
setElements([
{
id: '1',
type: 'input',
data: { label: 'An input node' },
position: { x: 0, y: 50 },
sourcePosition: 'right',
},
{
id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
position: { x: 300, y: 50 },
},
{
id: '3',
type: 'output',
data: { label: 'Output A' },
position: { x: 650, y: 25 },
targetPosition: 'left',
},
{
id: '4',
type: 'output',
data: { label: 'Output B' },
position: { x: 650, y: 100 },
targetPosition: 'left',
},
{
id: 'e1-2',
source: '1',
target: '2',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'e2a-3',
source: '2',
target: '3',
sourceHandle: 'a',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'e2b-4',
source: '2',
target: '4',
sourceHandle: 'b',
animated: true,
style: { stroke: '#fff' },
},
]);
}, []);
const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) =>
setElements((els) =>
addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els)
);
return (
<ReactFlow
elements={elements}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
style={{ background: bgColor }}
onLoad={onLoad}
nodeTypes={nodeTypes}
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
defaultZoom={1.5}
>
<MiniMap
nodeStrokeColor={(n) => {
if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor;
if (n.type === 'output') return '#ff0072';
}}
nodeColor={(n) => {
if (n.type === 'selectorNode') return bgColor;
return '#fff';
}}
/>
<Controls />
</ReactFlow>
);
};
export default CustomNodeFlow;