feat(background): add cross variant closes #2320

examples/nextjs/pages/Backgrounds/index.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from 'react';
+
+import ReactFlow, {
+  Node,
+  ReactFlowProvider,
+  useNodesState,
+} from '@react-flow/core';
+
+import Background, {
+  BackgroundProps,
+  BackgroundVariant,
+} from '@react-flow/background';
+
+import styles from './style.module.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 50, y: 50 },
+  },
+];
+
+const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
+  id,
+  bgProps,
+}) => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+
+  return (
+    <ReactFlowProvider>
+      <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
+        <Background {...bgProps} />
+      </ReactFlow>
+    </ReactFlowProvider>
+  );
+};
+
+const Backgrounds: FC = () => (
+  <div className={styles.wrapper}>
+    <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
+    <Flow
+      id="flow-b"
+      bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }}
+    />
+    <Flow
+      id="flow-c"
+      bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }}
+    />
+  </div>
+);
+
+export default Backgrounds;

examples/nextjs/pages/Backgrounds/style.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  display: flex;
+  height: 100%;
+}
+
+.wrapper :global .react-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper :global .react-flow {
+  border-right: 1px solid #ddd;
+}

examples/nextjs/pages/_app.tsx

@@ -4,6 +4,7 @@ import '../styles/globals.css';
 
 const routes = [
   '/',
+  '/Backgrounds',
   '/ControlledUncontrolled',
   '/CustomConnectionLine',
   '/CustomNode',
@@ -47,7 +48,7 @@ function MyApp({ Component, pageProps }) {
   return (
     <>
       <header>
-        <a className='logo' href='https://github.com/wbkd/react-flow'>
+        <a className="logo" href="https://github.com/wbkd/react-flow">
           React Flow Dev
         </a>
         <select defaultValue={router.pathname} onChange={onRouteChange}>

examples/nextjs/pages/index.tsx

@@ -86,7 +86,7 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
       onNodeDrag={onNodeDrag}
-      className='react-flow-basic-example'
+      className="react-flow-basic-example"
       minZoom={0.2}
       maxZoom={4}
       fitView