feat(lib): add gridColor param

dist/ReactGraph.js

@@ -6530,7 +6530,7 @@
         strokeColor = _ref$strokeColor === void 0 ? '#999' : _ref$strokeColor,
         _ref$strokeWidth = _ref.strokeWidth,
         strokeWidth = _ref$strokeWidth === void 0 ? 0.1 : _ref$strokeWidth,
-        styles = _ref.styles,
+        style = _ref.style,
         className = _ref.className;
 
     var _useStoreState = useStoreState(function (s) {
@@ -6563,7 +6563,7 @@
     return React__default.createElement("svg", {
       width: width,
       height: height,
-      style: _objectSpread2$1({}, baseStyles, {}, styles),
+      style: _objectSpread2$1({}, baseStyles, {}, style),
       className: gridClasses
     }, React__default.createElement("path", {
       fill: "none",
@@ -9168,7 +9168,8 @@
         onElementsRemove = _ref.onElementsRemove,
         deleteKeyCode = _ref.deleteKeyCode,
         elements = _ref.elements,
-        onConnect = _ref.onConnect;
+        onConnect = _ref.onConnect,
+        gridColor = _ref.gridColor;
     var zoomPane = React.useRef();
     var rendererNode = React.useRef();
     var state = useStoreState(function (s) {
@@ -9231,7 +9232,9 @@
     return React__default.createElement("div", {
       className: "react-flow__renderer",
       ref: rendererNode
-    }, React__default.createElement(GridRenderer, null), React__default.createElement(NodeRenderer, {
+    }, React__default.createElement(GridRenderer, {
+      strokeColor: gridColor
+    }), React__default.createElement(NodeRenderer, {
       nodeTypes: nodeTypes,
       onElementClick: onElementClick,
       onNodeDragStop: onNodeDragStop
@@ -9925,7 +9928,8 @@
         connectionLineType = _ref.connectionLineType,
         connectionLineStyle = _ref.connectionLineStyle,
         deleteKeyCode = _ref.deleteKeyCode,
-        selectionKeyCode = _ref.selectionKeyCode;
+        selectionKeyCode = _ref.selectionKeyCode,
+        gridColor = _ref.gridColor;
     var nodeTypesParsed = React.useMemo(function () {
       return createNodeTypes(nodeTypes);
     }, []);
@@ -9950,7 +9954,8 @@
       onElementsRemove: onElementsRemove,
       deleteKeyCode: deleteKeyCode,
       elements: elements,
-      onConnect: onConnect
+      onConnect: onConnect,
+      gridColor: gridColor
     }), children));
   };
 
@@ -9975,7 +9980,8 @@
     connectionLineType: 'bezier',
     connectionLineStyle: {},
     deleteKeyCode: 8,
-    selectionKeyCode: 16
+    selectionKeyCode: 16,
+    gridColor: '#999'
   };
 
   var baseStyle = {

examples/advanced/scripts/ExampleGraph.js

@@ -145,6 +145,7 @@ class App extends PureComponent {
         }}
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"
+        gridColor="#aaa"
       >
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}

src/container/GraphView/index.js

@@ -17,7 +17,7 @@ const GraphView = memo(({
   nodeTypes, edgeTypes, onMove, onLoad,
   onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
   selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
-  onConnect
+  onConnect, gridColor
 }) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
@@ -68,7 +68,7 @@ const GraphView = memo(({
 
   return (
     <div className="react-flow__renderer" ref={rendererNode}>
-      <GridRenderer />
+      <GridRenderer strokeColor={gridColor} />
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}

src/container/ReactFlow/index.js

@@ -25,7 +25,7 @@ const ReactFlow = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
-  connectionLineStyle, deleteKeyCode, selectionKeyCode
+  connectionLineStyle, deleteKeyCode, selectionKeyCode, gridColor
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -47,6 +47,7 @@ const ReactFlow = ({
           deleteKeyCode={deleteKeyCode}
           elements={elements}
           onConnect={onConnect}
+          gridColor={gridColor}
         />
         {children}
       </StoreProvider>
@@ -76,7 +77,8 @@ ReactFlow.defaultProps = {
   connectionLineType: 'bezier',
   connectionLineStyle: {},
   deleteKeyCode: 8,
-  selectionKeyCode: 16
+  selectionKeyCode: 16,
+  gridColor: '#999'
 };
 
 export default ReactFlow;