reaflow icon indicating copy to clipboard operation
reaflow copied to clipboard

Unable to update nodes' style with state variables

Open Mahi opened this issue 3 years ago • 1 comments

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

Mahi avatar Dec 02 '21 11:12 Mahi

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

matthewhampton avatar Nov 05 '22 11:11 matthewhampton