add className prop to ReactFlow container component closes #238

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');

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}

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;