feat(nodes): add class name option closes #254

src/components/Nodes/wrapNode.tsx

@@ -142,6 +142,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       onNodeDragStart,
       onNodeDragStop,
       style,
+      className,
       isInteractive,
       selectNodesOnDrag,
       sourcePosition,
@@ -151,7 +152,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', { selected });
+      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, { selected });
+
       const nodeStyle: CSSProperties = {
         zIndex: selected ? 10 : 3,
         transform: `translate(${xPos}px,${yPos}px)`,

src/container/NodeRenderer/index.tsx

@@ -42,6 +42,7 @@ function renderNode(
       transform={transform}
       selected={isSelected}
       style={node.style}
+      className={node.className}
       isInteractive={isInteractive}
       sourcePosition={node.sourcePosition}
       targetPosition={node.targetPosition}

src/hooks/useElementUpdater.ts

@@ -28,34 +28,33 @@ const useElementUpdater = (elements: Elements): void => {
           ? { ...existingNode.style, ...propNode.style }
           : existingNode.style;
 
+        const className = existingNode.className === propNode.className ? existingNode.className : propNode.className;
+
         const positionChanged =
           existingNode.position.x !== propNode.position.x || existingNode.position.y !== propNode.position.y;
 
-        if (positionChanged) {
-          return {
-            ...existingNode,
-            __rg: {
-              ...existingNode.__rg,
-              position: propNode.position,
-            },
-            position: propNode.position,
-            data,
-            style,
-          };
-        }
-
-        if (style) {
-          return {
-            ...existingNode,
-            data,
-            style,
-          };
-        }
-
-        return {
+        const nodeProps = {
           ...existingNode,
           data,
         };
+
+        if (positionChanged) {
+          nodeProps.__rg = {
+            ...existingNode.__rg,
+            position: propNode.position,
+          };
+          nodeProps.position = propNode.position;
+        }
+
+        if (typeof style !== 'undefined') {
+          nodeProps.style = style;
+        }
+
+        if (typeof className !== 'undefined') {
+          nodeProps.className = className;
+        }
+
+        return nodeProps;
       }
 
       return parseElement(propNode) as Node;

src/types/index.ts

@@ -37,6 +37,7 @@ export interface Node {
   __rg?: any;
   data?: any;
   style?: CSSProperties;
+  className?: string;
   targetPosition?: Position;
   sourcePosition?: Position;
 }
@@ -128,6 +129,7 @@ export interface WrapNodeProps {
   onNodeDragStart?: (node: Node) => void;
   onNodeDragStop?: (node: Node) => void;
   style?: CSSProperties;
+  className?: string;
   sourcePosition?: Position;
   targetPosition?: Position;
 }