diff --git a/packages/vx-demo/src/components/gallery.js b/packages/vx-demo/src/components/gallery.js
index 25f3d08ff0..e2dcbbe0ea 100644
--- a/packages/vx-demo/src/components/gallery.js
+++ b/packages/vx-demo/src/components/gallery.js
@@ -35,8 +35,8 @@ import Pack from './tiles/Pack.tsx';
 import Treemap from './tiles/Treemap.tsx';
 import Radar from './tiles/radar';
 import Responsive from './tiles/Responsive.tsx';
-import DragI from './tiles/drag-i';
-import DragII from './tiles/drag-ii';
+import DragI from './tiles/Drag-i.tsx';
+import DragII from './tiles/Drag-ii.tsx';
 import LinkTypes from './tiles/LinkTypes.tsx';
 import Threshold from './tiles/Threshold.tsx';
 import Chord from './tiles/Chord.tsx';
diff --git a/packages/vx-demo/src/components/tiles/Drag-i.tsx b/packages/vx-demo/src/components/tiles/Drag-i.tsx
new file mode 100644
index 0000000000..f7898efe64
--- /dev/null
+++ b/packages/vx-demo/src/components/tiles/Drag-i.tsx
@@ -0,0 +1,131 @@
+import React, { useMemo, useState } from 'react';
+import { scaleOrdinal } from '@vx/scale';
+import { LinearGradient } from '@vx/gradient';
+import { Drag, raise } from '@vx/drag';
+import { WidthAndHeight, ShowProvidedProps } from '../../types';
+
+const colors = [
+  '#025aac',
+  '#02cff9',
+  '#02efff',
+  '#03aeed',
+  '#0384d7',
+  '#edfdff',
+  '#ab31ff',
+  '#5924d7',
+  '#d145ff',
+  '#1a02b1',
+  '#e582ff',
+  '#ff00d4',
+  '#270eff',
+  '#827ce2',
+];
+
+const generateCircles = ({ num, width, height }: { num: number } & WidthAndHeight) =>
+  new Array(num).fill(1).map((d, i) => {
+    const radius = 25 - Math.random() * 20;
+    return {
+      id: `${i}`,
+      radius,
+      x: Math.round(Math.random() * (width - radius * 2) + radius),
+      y: Math.round(Math.random() * (height - radius * 2) + radius),
+    };
+  });
+
+const generateItems = ({ width, height }: WidthAndHeight) =>
+  generateCircles({
+    num: width < 360 ? 40 : 185,
+    width,
+    height,
+  });
+
+export default function DragI({ width, height }: ShowProvidedProps) {
+  const memoizedItems = useMemo(() => generateItems({ width, height }), [width, height]);
+  const [draggingItems, setDraggingItems] = useState(memoizedItems);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        range: colors,
+        domain: draggingItems.map(d => d.id),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [width, height],
+  );
+
+  if (width < 10) return null;
+
+  return (
+    <div className="Drag" style={{ touchAction: 'none' }}>
+      <svg width={width} height={height}>
+        <LinearGradient id="stroke" from="#ff00a5" to="#ffc500" />
+        <rect fill="#c4c3cb" width={width} height={height} rx={14} />
+
+        {draggingItems.map((d, i) => (
+          <Drag
+            key={`${d.id}`}
+            width={width}
+            height={height}
+            onDragStart={() => {
+              // svg follows the painter model
+              // so we need to move the data item
+              // to end of the array for it to be drawn
+              // "on top of" the other data items
+              setDraggingItems(raise(draggingItems, i));
+            }}
+          >
+            {({ dragStart, dragEnd, dragMove, isDragging, dx, dy }) =>
+              (false && isDragging && console.log(d.id, d.x, dx)) || (
+                <circle
+                  key={`dot-${d.id}`}
+                  cx={d.x}
+                  cy={d.y}
+                  r={isDragging ? d.radius + 4 : d.radius}
+                  fill={isDragging ? 'url(#stroke)' : colorScale(d.id)}
+                  transform={`translate(${dx}, ${dy})`}
+                  fillOpacity={0.9}
+                  stroke={isDragging ? 'white' : 'transparent'}
+                  strokeWidth={2}
+                  onMouseMove={dragMove}
+                  onMouseUp={dragEnd}
+                  onMouseDown={dragStart}
+                  onTouchStart={dragStart}
+                  onTouchMove={dragMove}
+                  onTouchEnd={dragEnd}
+                />
+              )
+            }
+          </Drag>
+        ))}
+      </svg>
+      <div className="deets">
+        <div>
+          Based on Mike Bostock's{' '}
+          <a href="https://bl.ocks.org/mbostock/c206c20294258c18832ff80d8fd395c3">
+            Circle Dragging II
+          </a>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .Drag {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+
+        svg {
+          margin: 1rem 0;
+        }
+        .deets {
+          display: flex;
+          flex-direction: row;
+          font-size: 12px;
+        }
+        .deets > div {
+          margin: 0.25rem;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/vx-demo/src/components/tiles/Drag-ii.tsx b/packages/vx-demo/src/components/tiles/Drag-ii.tsx
new file mode 100644
index 0000000000..d9ff12f477
--- /dev/null
+++ b/packages/vx-demo/src/components/tiles/Drag-ii.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { LinePath } from '@vx/shape';
+import { Drag } from '@vx/drag';
+import { curveBasis } from '@vx/curve';
+import { LinearGradient } from '@vx/gradient';
+import { ShowProvidedProps } from '../../types';
+
+type Lines = { x: number; y: number }[][];
+
+export default function DragII({ width, height }: ShowProvidedProps) {
+  const [lines, setLines] = useState<Lines>([]);
+
+  if (width < 10) return null;
+  return (
+    <div className="DragII" style={{ touchAction: 'none' }}>
+      <svg width={width} height={height}>
+        <LinearGradient
+          id="stroke"
+          from="#ff614e"
+          to="#ffdc64"
+          gradientUnits="userSpaceOnUse" // need for gradients to render on straight lines
+        />
+        <rect fill="#04002b" width={width} height={height} rx={14} />
+        {lines.map((line, i) => (
+          <LinePath
+            key={`line-${i}`}
+            fill="transparent"
+            stroke="url(#stroke)"
+            strokeWidth={3}
+            data={line}
+            curve={curveBasis}
+            x={d => d.x}
+            y={d => d.y}
+          />
+        ))}
+        <Drag
+          width={width}
+          height={height}
+          resetOnStart
+          onDragStart={({ x = 0, y = 0 }) => {
+            // add the new line with the starting point
+            setLines(currLines => [...currLines, [{ x, y }]]);
+          }}
+          onDragMove={({ x = 0, y = 0, dx, dy }) => {
+            // add the new point to the current line
+            setLines(currLines => {
+              const nextLines = [...currLines];
+              const newPoint = { x: x + dx, y: y + dy };
+              const lastIndex = nextLines.length - 1;
+              nextLines[lastIndex] = [...(nextLines[lastIndex] || []), newPoint];
+              return nextLines;
+            });
+          }}
+        >
+          {({ x = 0, y = 0, dx, dy, isDragging, dragStart, dragEnd, dragMove }) => (
+            <g>
+              {/* decorate the currently drawing line */}
+              {isDragging && (
+                <g>
+                  <rect
+                    fill="white"
+                    width={8}
+                    height={8}
+                    x={x + dx - 4}
+                    y={y + dy - 4}
+                    pointerEvents="none"
+                  />
+                  <circle
+                    cx={x}
+                    cy={y}
+                    r={4}
+                    fill="transparent"
+                    stroke="white"
+                    pointerEvents="none"
+                  />
+                </g>
+              )}
+              {/* create the drawing area */}
+              <rect
+                fill="transparent"
+                width={width}
+                height={height}
+                onMouseDown={dragStart}
+                onMouseUp={dragEnd}
+                onMouseMove={dragMove}
+                onTouchStart={dragStart}
+                onTouchEnd={dragEnd}
+                onTouchMove={dragMove}
+              />
+            </g>
+          )}
+        </Drag>
+      </svg>
+      <div className="deets">
+        <div>
+          Based on Mike Bostock's{' '}
+          <a href="https://bl.ocks.org/mbostock/f705fc55e6f26df29354">Line Drawing</a>
+        </div>
+      </div>
+
+      <style jsx>{`
+        .DragII {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+
+        svg {
+          margin: 1rem 0;
+          cursor: crosshair;
+        }
+
+        .deets {
+          display: flex;
+          flex-direction: row;
+          font-size: 12px;
+        }
+        .deets > div {
+          margin: 0.25rem;
+        }
+      `}</style>
+    </div>
+  );
+}
diff --git a/packages/vx-demo/src/components/tiles/Geo-Mercator.tsx b/packages/vx-demo/src/components/tiles/Geo-Mercator.tsx
index 0f72dca880..68d5137f37 100644
--- a/packages/vx-demo/src/components/tiles/Geo-Mercator.tsx
+++ b/packages/vx-demo/src/components/tiles/Geo-Mercator.tsx
@@ -35,7 +35,6 @@ export default ({ width, height, events = false }: ShowProvidedProps) => {
   const centerX = width / 2;
   const centerY = height / 2;
   const scale = (width / 630) * 100;
-  console.warn({ width, height });
 
   return (
     <svg width={width} height={height}>
diff --git a/packages/vx-demo/src/components/tiles/drag-i.js b/packages/vx-demo/src/components/tiles/drag-i.js
deleted file mode 100644
index 0772b66ffc..0000000000
--- a/packages/vx-demo/src/components/tiles/drag-i.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import React from 'react';
-import { scaleOrdinal } from '@vx/scale';
-import { LinearGradient } from '@vx/gradient';
-import { Drag, raise } from '@vx/drag';
-
-const colors = [
-  '#025aac',
-  '#02cff9',
-  '#02efff',
-  '#03aeed',
-  '#0384d7',
-  '#edfdff',
-  '#ab31ff',
-  '#5924d7',
-  '#d145ff',
-  '#1a02b1',
-  '#e582ff',
-  '#ff00d4',
-  '#270eff',
-  '#827ce2',
-];
-
-function genCircles({ num, width, height }) {
-  return new Array(num).fill(1).map((d, i) => {
-    const radius = 25 - Math.random() * 20;
-    return {
-      id: i,
-      radius,
-      x: Math.round(Math.random() * (width - radius * 2) + radius),
-      y: Math.round(Math.random() * (height - radius * 2) + radius),
-    };
-  });
-}
-
-const genItems = ({ width, height }) =>
-  genCircles({
-    num: width < 360 ? 40 : 185,
-    width,
-    height,
-  });
-
-export default class DragI extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      items: genItems({ ...props }),
-    };
-    this.colorScale = scaleOrdinal({
-      range: colors,
-      domain: this.state.items.map(d => d.id),
-    });
-  }
-
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { width } = nextProps;
-    if (width !== this.props.width) {
-      this.setState(() => {
-        return {
-          items: genItems({ ...nextProps }),
-        };
-      });
-    }
-  }
-
-  render() {
-    const { width, height } = this.props;
-    if (width < 10) return null;
-    return (
-      <div className="Drag" style={{ touchAction: 'none' }}>
-        <svg width={width} height={height}>
-          <LinearGradient id="stroke" from="#ff00a5" to="#ffc500" />
-          <rect fill="#c4c3cb" width={width} height={height} rx={14} />
-          {this.state.items.map((d, i) => (
-            <Drag
-              key={`${d.id}`}
-              width={width}
-              height={height}
-              onDragStart={() => {
-                // svg follows the painter model
-                // so we need to move the data item
-                // to end of the array for it to be drawn
-                // "on top of" the other data items
-                this.setState(state => {
-                  return {
-                    items: raise(state.items, i),
-                  };
-                });
-              }}
-            >
-              {({ dragStart, dragEnd, dragMove, isDragging, dx, dy }) => {
-                return (
-                  <circle
-                    key={`dot-${d.id}`}
-                    cx={d.x}
-                    cy={d.y}
-                    r={isDragging ? d.radius + 4 : d.radius}
-                    fill={isDragging ? 'url(#stroke)' : this.colorScale(d.id)}
-                    transform={`translate(${dx}, ${dy})`}
-                    fillOpacity={0.9}
-                    stroke={isDragging ? 'white' : 'transparent'}
-                    strokeWidth={2}
-                    onMouseMove={dragMove}
-                    onMouseUp={dragEnd}
-                    onMouseDown={dragStart}
-                    onTouchStart={dragStart}
-                    onTouchMove={dragMove}
-                    onTouchEnd={dragEnd}
-                  />
-                );
-              }}
-            </Drag>
-          ))}
-        </svg>
-        <div className="deets">
-          <div>
-            Based on Mike Bostock's{' '}
-            <a href="https://bl.ocks.org/mbostock/c206c20294258c18832ff80d8fd395c3">
-              Circle Dragging II
-            </a>
-          </div>
-        </div>
-
-        <style jsx>{`
-          .Drag {
-            display: flex;
-            flex-direction: column;
-            user-select: none;
-          }
-
-          svg {
-            margin: 1rem 0;
-          }
-          .deets {
-            display: flex;
-            flex-direction: row;
-            font-size: 12px;
-          }
-          .deets > div {
-            margin: 0.25rem;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
diff --git a/packages/vx-demo/src/components/tiles/drag-ii.js b/packages/vx-demo/src/components/tiles/drag-ii.js
deleted file mode 100644
index c3b6a4cd22..0000000000
--- a/packages/vx-demo/src/components/tiles/drag-ii.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import { LinePath } from '@vx/shape';
-import { Drag } from '@vx/drag';
-import { curveBasis } from '@vx/curve';
-import { LinearGradient } from '@vx/gradient';
-
-export default class DragII extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: props.data || [],
-    };
-  }
-
-  render() {
-    const { width, height } = this.props;
-    if (width < 10) return null;
-    return (
-      <div className="DragII" style={{ touchAction: 'none' }}>
-        <svg width={width} height={height}>
-          <LinearGradient id="stroke" from="#ff614e" to="#ffdc64" />
-          <rect fill="#04002b" width={width} height={height} rx={14} />
-          {this.state.data.map((datum, i) => {
-            return (
-              <LinePath
-                key={`line-${i}`}
-                fill="transparent"
-                stroke="url(#stroke)"
-                strokeWidth={3}
-                data={datum}
-                curve={curveBasis}
-                x={d => d.x}
-                y={d => d.y}
-              />
-            );
-          })}
-          <Drag
-            width={width}
-            height={height}
-            resetOnStart
-            onDragStart={({ x, y }) => {
-              // add the new line with the starting point
-              this.setState(state => {
-                const newLine = [{ x, y }];
-                return {
-                  data: state.data.concat([newLine]),
-                };
-              });
-            }}
-            onDragMove={({ x, y, dx, dy }) => {
-              // add the new point to the current line
-              this.setState(state => {
-                const nextData = [...state.data];
-                const point = [{ x: x + dx, y: y + dy }];
-                const i = nextData.length - 1;
-                nextData[i] = nextData[i].concat(point);
-                return { data: nextData };
-              });
-            }}
-          >
-            {({ x, y, dx, dy, isDragging, dragStart, dragEnd, dragMove }) => {
-              return (
-                <g>
-                  {/* decorate the currently drawing line */}
-                  {isDragging && (
-                    <g>
-                      <rect
-                        fill="white"
-                        width={8}
-                        height={8}
-                        x={x + dx - 4}
-                        y={y + dy - 4}
-                        style={{ pointerEvents: 'none' }}
-                      />
-                      <circle
-                        cx={x}
-                        cy={y}
-                        r={4}
-                        fill="transparent"
-                        stroke="white"
-                        style={{ pointerEvents: 'none' }}
-                      />
-                    </g>
-                  )}
-                  {/* create the drawing area */}
-                  <rect
-                    fill="transparent"
-                    width={width}
-                    height={height}
-                    onMouseDown={dragStart}
-                    onMouseUp={dragEnd}
-                    onMouseMove={dragMove}
-                    onTouchStart={dragStart}
-                    onTouchEnd={dragEnd}
-                    onTouchMove={dragMove}
-                  />
-                </g>
-              );
-            }}
-          </Drag>
-        </svg>
-        <div className="deets">
-          <div>
-            Based on Mike Bostock's{' '}
-            <a href="https://bl.ocks.org/mbostock/f705fc55e6f26df29354">Line Drawing</a>
-          </div>
-        </div>
-
-        <style jsx>{`
-          .DragII {
-            display: flex;
-            flex-direction: column;
-            user-select: none;
-          }
-
-          svg {
-            margin: 1rem 0;
-            cursor: crosshair;
-          }
-
-          .deets {
-            display: flex;
-            flex-direction: row;
-            font-size: 12px;
-          }
-          .deets > div {
-            margin: 0.25rem;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
diff --git a/packages/vx-demo/src/next.config.js b/packages/vx-demo/src/next.config.js
new file mode 100644
index 0000000000..3fcd1554bc
--- /dev/null
+++ b/packages/vx-demo/src/next.config.js
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  typescript: {
+    ignoreDevErrors: true,
+    ignoreBuildErrors: true,
+  },
+};
diff --git a/packages/vx-demo/src/pages/Drag-i.tsx b/packages/vx-demo/src/pages/Drag-i.tsx
new file mode 100644
index 0000000000..9f477b2df8
--- /dev/null
+++ b/packages/vx-demo/src/pages/Drag-i.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import Show from '../components/Show';
+import DragI from '../components/tiles/Drag-i';
+
+export default () => {
+  return (
+    <Show component={DragI} title="Drag I">
+      {`import React, { useMemo, useState } from 'react';
+import { scaleOrdinal } from '@vx/scale';
+import { LinearGradient } from '@vx/gradient';
+import { Drag, raise } from '@vx/drag';
+import { WidthAndHeight, ShowProvidedProps } from '../../types';
+
+const colors = [
+  '#025aac',
+  '#02cff9',
+  '#02efff',
+  '#03aeed',
+  '#0384d7',
+  '#edfdff',
+  '#ab31ff',
+  '#5924d7',
+  '#d145ff',
+  '#1a02b1',
+  '#e582ff',
+  '#ff00d4',
+  '#270eff',
+  '#827ce2',
+];
+
+const generateCircles = ({ num, width, height }: { num: number } & WidthAndHeight) =>
+  new Array(num).fill(1).map((d, i) => {
+    const radius = 25 - Math.random() * 20;
+    return {
+      id: \`\${i}\`,
+      radius,
+      x: Math.round(Math.random() * (width - radius * 2) + radius),
+      y: Math.round(Math.random() * (height - radius * 2) + radius),
+    };
+  });
+
+const generateItems = ({ width, height }: WidthAndHeight) =>
+  generateCircles({
+    num: width < 360 ? 40 : 185,
+    width,
+    height,
+  });
+
+export default function DragI({ width, height }: ShowProvidedProps) {
+  const memoizedItems = useMemo(() => generateItems({ width, height }), [width, height]);
+  const [draggingItems, setDraggingItems] = useState(memoizedItems);
+
+  const colorScale = useMemo(
+    () =>
+      scaleOrdinal({
+        range: colors,
+        domain: draggingItems.map(d => d.id),
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [width, height],
+  );
+
+  if (width < 10) return null;
+
+  return (
+    <div className="Drag" style={{ touchAction: 'none' }}>
+      <svg width={width} height={height}>
+        <LinearGradient id="stroke" from="#ff00a5" to="#ffc500" />
+        <rect fill="#c4c3cb" width={width} height={height} rx={14} />
+
+        {draggingItems.map((d, i) => (
+          <Drag
+            key={\`\${d.id}\`}
+            width={width}
+            height={height}
+            onDragStart={() => {
+              // svg follows the painter model
+              // so we need to move the data item
+              // to end of the array for it to be drawn
+              // "on top of" the other data items
+              setDraggingItems(raise(draggingItems, i));
+            }}
+          >
+            {({ dragStart, dragEnd, dragMove, isDragging, dx, dy }) =>
+              (false && isDragging && console.log(d.id, d.x, dx)) || (
+                <circle
+                  key={\`dot-\${d.id}\`}
+                  cx={d.x}
+                  cy={d.y}
+                  r={isDragging ? d.radius + 4 : d.radius}
+                  fill={isDragging ? 'url(#stroke)' : colorScale(d.id)}
+                  transform={\`translate(\${dx}, \${dy})\`}
+                  fillOpacity={0.9}
+                  stroke={isDragging ? 'white' : 'transparent'}
+                  strokeWidth={2}
+                  onMouseMove={dragMove}
+                  onMouseUp={dragEnd}
+                  onMouseDown={dragStart}
+                  onTouchStart={dragStart}
+                  onTouchMove={dragMove}
+                  onTouchEnd={dragEnd}
+                />
+              )
+            }
+          </Drag>
+        ))}
+      </svg>
+      <div className="deets">
+        <div>
+          Based on Mike Bostock's{' '}
+          <a href="https://bl.ocks.org/mbostock/c206c20294258c18832ff80d8fd395c3">
+            Circle Dragging II
+          </a>
+        </div>
+      </div>
+
+      <style jsx>{\`
+        .Drag {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+
+        svg {
+          margin: 1rem 0;
+        }
+        .deets {
+          display: flex;
+          flex-direction: row;
+          font-size: 12px;
+        }
+        .deets > div {
+          margin: 0.25rem;
+        }
+      \`}</style>
+    </div>
+  );
+}
+`}
+    </Show>
+  );
+};
diff --git a/packages/vx-demo/src/pages/Drag-ii.tsx b/packages/vx-demo/src/pages/Drag-ii.tsx
new file mode 100644
index 0000000000..833146df79
--- /dev/null
+++ b/packages/vx-demo/src/pages/Drag-ii.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import Show from '../components/Show';
+import DragII from '../components/tiles/Drag-ii';
+
+export default () => {
+  return (
+    <Show component={DragII} title="Drag II">
+      {`import React, { useState } from 'react';
+import { LinePath } from '@vx/shape';
+import { Drag } from '@vx/drag';
+import { curveBasis } from '@vx/curve';
+import { LinearGradient } from '@vx/gradient';
+import { ShowProvidedProps } from '../../types';
+
+type Lines = { x: number; y: number }[][];
+
+export default function DragII({ width, height }: ShowProvidedProps) {
+  const [lines, setLines] = useState<Lines>([]);
+
+  if (width < 10) return null;
+  return (
+    <div className="DragII" style={{ touchAction: 'none' }}>
+      <svg width={width} height={height}>
+        <LinearGradient
+          id="stroke"
+          from="#ff614e"
+          to="#ffdc64"
+          gradientUnits="userSpaceOnUse" // need for gradients to render on straight lines
+        />
+        <rect fill="#04002b" width={width} height={height} rx={14} />
+        {lines.map((line, i) => (
+          <LinePath
+            key={\`line-\${i}\`}
+            fill="transparent"
+            stroke="url(#stroke)"
+            strokeWidth={3}
+            data={line}
+            curve={curveBasis}
+            x={d => d.x}
+            y={d => d.y}
+          />
+        ))}
+        <Drag
+          width={width}
+          height={height}
+          resetOnStart
+          onDragStart={({ x = 0, y = 0 }) => {
+            // add the new line with the starting point
+            setLines(currLines => [...currLines, [{ x, y }]]);
+          }}
+          onDragMove={({ x = 0, y = 0, dx, dy }) => {
+            // add the new point to the current line
+            setLines(currLines => {
+              const nextLines = [...currLines];
+              const newPoint = { x: x + dx, y: y + dy };
+              const lastIndex = nextLines.length - 1;
+              nextLines[lastIndex] = [...(nextLines[lastIndex] || []), newPoint];
+              return nextLines;
+            });
+          }}
+        >
+          {({ x = 0, y = 0, dx, dy, isDragging, dragStart, dragEnd, dragMove }) => (
+            <g>
+              {/* decorate the currently drawing line */}
+              {isDragging && (
+                <g>
+                  <rect
+                    fill="white"
+                    width={8}
+                    height={8}
+                    x={x + dx - 4}
+                    y={y + dy - 4}
+                    pointerEvents="none"
+                  />
+                  <circle
+                    cx={x}
+                    cy={y}
+                    r={4}
+                    fill="transparent"
+                    stroke="white"
+                    pointerEvents="none"
+                  />
+                </g>
+              )}
+              {/* create the drawing area */}
+              <rect
+                fill="transparent"
+                width={width}
+                height={height}
+                onMouseDown={dragStart}
+                onMouseUp={dragEnd}
+                onMouseMove={dragMove}
+                onTouchStart={dragStart}
+                onTouchEnd={dragEnd}
+                onTouchMove={dragMove}
+              />
+            </g>
+          )}
+        </Drag>
+      </svg>
+      <div className="deets">
+        <div>
+          Based on Mike Bostock's{' '}
+          <a href="https://bl.ocks.org/mbostock/f705fc55e6f26df29354">Line Drawing</a>
+        </div>
+      </div>
+
+      <style jsx>{\`
+        .DragII {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+
+        svg {
+          margin: 1rem 0;
+          cursor: crosshair;
+        }
+
+        .deets {
+          display: flex;
+          flex-direction: row;
+          font-size: 12px;
+        }
+        .deets > div {
+          margin: 0.25rem;
+        }
+      \`}</style>
+    </div>
+  );
+}
+
+`}
+    </Show>
+  );
+};
diff --git a/packages/vx-demo/src/pages/drag-i.js b/packages/vx-demo/src/pages/drag-i.js
deleted file mode 100644
index 73fa3f20e4..0000000000
--- a/packages/vx-demo/src/pages/drag-i.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React from 'react';
-import Show from '../components/Show.tsx';
-import DragI from '../components/tiles/drag-i';
-
-export default () => {
-  return (
-    <Show component={DragI} title="Drag I">
-      {`import React from 'react';
-import { scaleOrdinal } from '@vx/scale';
-import { LinearGradient } from '@vx/gradient';
-import { Drag, raise } from '@vx/drag';
-
-const colors = [
-  '#025aac',
-  '#02cff9',
-  '#02efff',
-  '#03aeed',
-  '#0384d7',
-  '#edfdff',
-  '#ab31ff',
-  '#5924d7',
-  '#d145ff',
-  '#1a02b1',
-  '#e582ff',
-  '#ff00d4',
-  '#270eff',
-  '#827ce2',
-];
-
-function genCircles({ num, width, height }) {
-  return Array(num)
-    .fill(1)
-    .map((d, i) => {
-      const radius = 25 - Math.random() * 20;
-      return {
-        id: i,
-        radius,
-        x: Math.round(Math.random() * (width - radius * 2) + radius),
-        y: Math.round(Math.random() * (height - radius * 2) + radius),
-      };
-    });
-}
-
-const genItems = ({ width, height }) =>
-  genCircles({
-    num: width < 360 ? 40 : 185,
-    width,
-    height,
-  });
-
-export default class DragI extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      items: genItems({ ...props }),
-    };
-    this.colorScale = scaleOrdinal({
-      range: colors,
-      domain: this.state.items.map(d => d.id),
-    });
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { width, height } = nextProps;
-    if (width !== this.props.width) {
-      this.setState(() => {
-        return {
-          items: genItems({ ...nextProps }),
-        };
-      });
-    }
-  }
-
-  render() {
-    const { width, height } = this.props;
-    return (
-      <div className="Drag" style={{ touchAction: 'none' }}>
-        <svg width={width} height={height}>
-          <LinearGradient id="stroke" from="#ff00a5" to="#ffc500" />
-          <rect
-            fill="#c4c3cb"
-            width={width}
-            height={height}
-            rx={14}
-          />
-          {this.state.items.map((d, i) => (
-            <Drag
-              key={\`\${d.id}\`}
-              width={width}
-              height={height}
-              onDragStart={() => {
-                // svg follows the painter model
-                // so we need to move the data item
-                // to end of the array for it to be drawn
-                // "on top of" the other data items
-                this.setState((state, props) => {
-                  return {
-                    items: raise(state.items, i),
-                  };
-                });
-              }}
-            >
-              {({
-                dragStart,
-                dragEnd,
-                dragMove,
-                isDragging,
-                dx,
-                dy,
-              }) => {
-                return (
-                  <circle
-                    key={\`dot-\${d.id}\`}
-                    cx={d.x}
-                    cy={d.y}
-                    r={isDragging ? d.radius + 4 : d.radius}
-                    transform={\`translate(\${dx}, \${dy})\`}
-                    fill={
-                      isDragging
-                        ? 'url(#stroke)'
-                        : this.colorScale(d.id)
-                    }
-                    fillOpacity={0.9}
-                    stroke={isDragging ? 'white' : 'transparent'}
-                    strokeWidth={2}
-                    onMouseMove={dragMove}
-                    onMouseUp={dragEnd}
-                    onMouseDown={dragStart}
-                    onTouchStart={dragStart}
-                    onTouchMove={dragMove}
-                    onTouchEnd={dragEnd}
-                  />
-                );
-              }}
-            </Drag>
-          ))}
-        </svg>
-      </div>
-    );
-  }
-}
-`}
-    </Show>
-  );
-};
diff --git a/packages/vx-demo/src/pages/drag-ii.js b/packages/vx-demo/src/pages/drag-ii.js
deleted file mode 100644
index 0c08b801d6..0000000000
--- a/packages/vx-demo/src/pages/drag-ii.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React from 'react';
-import Show from '../components/Show.tsx';
-import DragII from '../components/tiles/drag-ii';
-
-export default () => {
-  return (
-    <Show component={DragII} title="Drag II">
-      {`import React from 'react';
-import { LinePath } from '@vx/shape';
-import { Drag } from '@vx/drag';
-import { curveBasis } from '@vx/curve';
-import { LinearGradient } from '@vx/gradient';
-
-export default class DragII extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: props.data || [],
-    };
-  }
-
-  render() {
-    const { width, height } = this.props;
-    return (
-      <div className="DragII" style={{ touchAction: 'none' }}>
-        <svg width={width} height={height}>
-          <LinearGradient id="stroke" from="#ff614e" to="#ffdc64" />
-          <rect
-            fill="#04002b"
-            width={width}
-            height={height}
-            rx={14}
-          />
-          {this.state.data.map((d, i) => {
-            return (
-              <LinePath
-                key={\`line-\${i}\`}
-                fill={'transparent'}
-                stroke="url(#stroke)"
-                strokeWidth={3}
-                data={d}
-                curve={curveBasis}
-                x={d => d.x}
-                y={d => d.y}
-              />
-            );
-          })}
-          <Drag
-            width={width}
-            height={height}
-            resetOnStart={true}
-            onDragStart={({ x, y }) => {
-              // add the new line with the starting point
-              this.setState((state, props) => {
-                const newLine = [{ x, y }];
-                return {
-                  data: state.data.concat([newLine]),
-                };
-              });
-            }}
-            onDragMove={({ x, y, dx, dy }) => {
-              // add the new point to the current line
-              this.setState((state, props) => {
-                const nextData = [...state.data];
-                const point = [{ x: x + dx, y: y + dy }];
-                const i = nextData.length - 1;
-                nextData[i] = nextData[i].concat(point);
-                return { data: nextData };
-              });
-            }}
-          >
-            {({
-              x,
-              y,
-              dx,
-              dy,
-              isDragging,
-              dragStart,
-              dragEnd,
-              dragMove,
-            }) => {
-              return (
-                <g>
-                  {/* decorate the currently drawing line */}
-                  {isDragging && (
-                    <g>
-                      <rect
-                        fill="white"
-                        width={8}
-                        height={8}
-                        x={x + dx - 4}
-                        y={y + dy - 4}
-                        style={{ pointerEvents: 'none' }}
-                      />
-                      <circle
-                        cx={x}
-                        cy={y}
-                        r={4}
-                        fill="transparent"
-                        stroke="white"
-                        style={{ pointerEvents: 'none' }}
-                      />
-                    </g>
-                  )}
-                  {/* create the drawing area */}
-                  <rect
-                    fill="transparent"
-                    width={width}
-                    height={height}
-                    onMouseDown={dragStart}
-                    onMouseUp={dragEnd}
-                    onMouseMove={dragMove}
-                    onTouchStart={dragStart}
-                    onTouchEnd={dragEnd}
-                    onTouchMove={dragMove}
-                  />
-                </g>
-              );
-            }}
-          </Drag>
-        </svg>
-      </div>
-    );
-  }
-}
-`}
-    </Show>
-  );
-};
diff --git a/packages/vx-demo/src/types/index.ts b/packages/vx-demo/src/types/index.ts
index e2e85e43bb..b6710a3e5a 100644
--- a/packages/vx-demo/src/types/index.ts
+++ b/packages/vx-demo/src/types/index.ts
@@ -5,6 +5,11 @@ export interface MarginShape {
   left: number;
 }
 
+export interface WidthAndHeight {
+  width: number;
+  height: number;
+}
+
 export type ShowProvidedProps = {
   width: number;
   height: number;
diff --git a/packages/vx-drag/src/Drag.tsx b/packages/vx-drag/src/Drag.tsx
index b18abee099..acc05edea6 100644
--- a/packages/vx-drag/src/Drag.tsx
+++ b/packages/vx-drag/src/Drag.tsx
@@ -63,8 +63,8 @@ export default class Drag extends React.Component<DragProps, DragState> {
           isDragging: true,
           dx: resetOnStart ? 0 : dx,
           dy: resetOnStart ? 0 : dy,
-          x: resetOnStart ? point.x : -dx + point.x,
-          y: resetOnStart ? point.y : -dy + point.y,
+          x: resetOnStart ? point.x : point.x - dx,
+          y: resetOnStart ? point.y : point.y - dy,
         };
       },
       onDragStart &&
@@ -84,8 +84,8 @@ export default class Drag extends React.Component<DragProps, DragState> {
         return isDragging
           ? {
               isDragging: true,
-              dx: -((x || 0) - point.x),
-              dy: -((y || 0) - point.y),
+              dx: point.x - (x || 0),
+              dy: point.y - (y || 0),
             }
           : null;
       },
diff --git a/packages/vx-event/src/localPoint.ts b/packages/vx-event/src/localPoint.ts
index 3f497e1081..f9fa7cbce9 100644
--- a/packages/vx-event/src/localPoint.ts
+++ b/packages/vx-event/src/localPoint.ts
@@ -2,13 +2,17 @@ import localPointGeneric from './localPointGeneric';
 import { EventType } from './types';
 import { isElement, isEvent } from './typeGuards';
 
+/** Handles two signatures for backwards compatibility. */
 export default function localPoint(nodeOrEvent: Element | EventType, maybeEvent?: EventType) {
+  // localPoint(node, event)
   if (isElement(nodeOrEvent) && maybeEvent) {
     return localPointGeneric(nodeOrEvent, maybeEvent);
   }
+  // localPoint(event)
   if (isEvent(nodeOrEvent)) {
-    const node = nodeOrEvent.target as Element;
-    if (node) return localPointGeneric(node, nodeOrEvent);
+    const event = nodeOrEvent;
+    const node = event.target as Element;
+    if (node) return localPointGeneric(node, event);
   }
   return null;
 }
diff --git a/packages/vx-event/src/localPointGeneric.ts b/packages/vx-event/src/localPointGeneric.ts
index 4138627c3d..1a1ccb343f 100644
--- a/packages/vx-event/src/localPointGeneric.ts
+++ b/packages/vx-event/src/localPointGeneric.ts
@@ -10,7 +10,7 @@ export default function localPoint(node: Element, event: EventType) {
 
   // find top-most SVG
   const svg = isSVGElement(node) ? node.ownerSVGElement : node;
-  const screenCTM = isSVGGraphicsElement(node) ? node.getScreenCTM() : null;
+  const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
 
   if (isSVGSVGElement(svg) && screenCTM) {
     let point = svg.createSVGPoint();