reaflow
reaflow copied to clipboard
Unable to update nodes' style with state variables
I'm submitting a...
[x] Bug report
[x] Feature request
Current behavior
Attempting to change nodes' style by changing a state variable color
:
const [color, setColor] = useState('#ffffff');
return <Canvas
ref={canvasRef}
nodes={myNodes}
...
node={<ReaflowNode
style={{ fill: color }}
...
/>}
/>;
But the node styles don't update/nodes don't re-render when a component's state is changed.
Expected behavior
Nodes change color.
What is the motivation / use case for changing the behavior?
Theming of nodes.
Environment
Libs:
- react version: 17.0.2
I have worked around this issue by changing the key of the Node element when I want to change the style.
e.g. :
return <Node
key={`${nodeProps.id}-${nodeProps.id === selection}`}
style={{ stroke: '#1a192b', fill: 'white', strokeWidth: nodeProps.id === selection ? 2 : 1 }}/>
gives the node a thicker border when selected