fix(bgTypes): add bg types to bg renderer #19

examples/advanced/scripts/ExampleGraph.js

@@ -141,7 +141,7 @@ class App extends PureComponent {
         }}
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"
-        backgroundColor="#aaa"
+        backgroundColor="#888"
         backgroundGap={16}
       >
         <MiniMap

examples/basic/scripts/ExampleGraph.js

@@ -58,7 +58,7 @@ class App extends PureComponent {
         onConnect={params => this.onConnect(params)}
         onNodeDragStop={onNodeDragStop}
         style={{ width: '100%', height: '100%' }}
-        showBackground={false}
+        backgroundType="lines"
       />
     );
   }

src/container/BackgroundRenderer/index.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import Grid from './Grid';
 
 const bgComponents = {
-  grid: Grid
+  lines: Grid,
+  dots: Grid
 };
 
 const BackgroundRenderer = memo(({
@@ -17,11 +18,11 @@ const BackgroundRenderer = memo(({
 BackgroundRenderer.displayName = 'BackgroundRenderer';
 
 BackgroundRenderer.propTypes = {
-  backgroundType: PropTypes.oneOf(['grid'])
+  backgroundType: PropTypes.oneOf(['lines', 'dots'])
 };
 
 BackgroundRenderer.defaultProps = {
-  backgroundType: 'grid'
+  backgroundType: 'dots'
 };
 
 export default BackgroundRenderer;

src/container/ReactFlow/index.js

@@ -76,7 +76,7 @@ ReactFlow.propTypes = {
   gridColor: PropTypes.string,
   gridGap: PropTypes.number,
   showBackground: PropTypes.bool,
-  backgroundType: PropTypes.oneOf(['grid'])
+  backgroundType: PropTypes.oneOf(['lines', 'dots'])
 };
 
 ReactFlow.defaultProps = {
@@ -103,7 +103,7 @@ ReactFlow.defaultProps = {
   backgroundColor: '#999',
   backgroundGap: 24,
   showBackground: true,
-  backgroundType: 'grid'
+  backgroundType: 'dots'
 };
 
 export default ReactFlow;