From cebab6731b0a4826464dd7e978c1d7e3ec359a97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20Mo=CC=88ller?= <chrtze@gmail.com>
Date: Tue, 19 May 2020 18:06:00 +0200
Subject: [PATCH] add className prop to ReactFlow container component closes
 #238

---
 cypress/integration/flow/basic.spec.js | 1 +
 example/src/Basic/index.js             | 1 +
 src/container/ReactFlow/index.tsx      | 6 +++++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js
index ae69e220..46e2aed7 100644
--- a/cypress/integration/flow/basic.spec.js
+++ b/cypress/integration/flow/basic.spec.js
@@ -3,6 +3,7 @@ describe('Basic Graph Rendering', () => {
     cy.visit('/basic');
 
     cy.get('.react-flow__renderer');
+    cy.get('.react-flow-basic-example'); // check if className prop works
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
     cy.get('.react-flow__node').children('div').children('.react-flow__handle');
diff --git a/example/src/Basic/index.js b/example/src/Basic/index.js
index 5edc5ce6..002ef268 100644
--- a/example/src/Basic/index.js
+++ b/example/src/Basic/index.js
@@ -49,6 +49,7 @@ const BasicFlow = () => {
       onNodeDragStop={onNodeDragStop}
       style={{ width: '100%', height: '100%' }}
       backgroundType="lines"
+      className="react-flow-basic-example"
     >
       <button
         onClick={updatePos}
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 1285cb58..f0d3e9f3 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
+import cx from 'classnames';
 import { StoreProvider } from 'easy-peasy';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
@@ -44,12 +45,14 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
   isInteractive: boolean;
+  className: string;
 }
 
 const ReactFlow = ({
   style,
   onElementClick,
   elements = [],
+  className,
   children,
   nodeTypes,
   edgeTypes,
@@ -75,7 +78,7 @@ const ReactFlow = ({
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
 
   return (
-    <div style={style} className="react-flow">
+    <div style={style} className={cx('react-flow', className)}>
       <StoreProvider store={store}>
         <GraphView
           onLoad={onLoad}
@@ -137,6 +140,7 @@ ReactFlow.defaultProps = {
   snapGrid: [16, 16],
   onlyRenderVisibleNodes: true,
   isInteractive: true,
+  className: '',
 };
 
 export default ReactFlow;