feat(axis): Expose innerRef prop on the various Axis components (airb…

…nb#1749) * feat(axis): Expose innerRef prop on the Axis component * feat(axis): Improve documentation for the innerRef prop * feat(axis): Remove unnecessary import * feat(axis): Retrigger build
Onxi95 · Nov 21, 2023 · 7d0529b · 7d0529b
1 parent e967322
commit 7d0529b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/visx-axis/src/axis/Axis.tsx b/packages/visx-axis/src/axis/Axis.tsx
@@ -20,6 +20,7 @@ export default function Axis<Scale extends AxisScale>({
   hideAxisLine = false,
   hideTicks = false,
   hideZero = false,
+  innerRef,
   left = 0,
   numTicks = 10,
   orientation = Orientation.bottom,
@@ -69,7 +70,7 @@ export default function Axis<Scale extends AxisScale>({
   });
 
   return (
-    <Group className={cx('visx-axis', axisClassName)} top={top} left={left}>
+    <Group className={cx('visx-axis', axisClassName)} innerRef={innerRef} top={top} left={left}>
       {children({
         ...restProps,
         axisFromPoint,

diff --git a/packages/visx-axis/src/types.ts b/packages/visx-axis/src/types.ts
@@ -1,6 +1,6 @@
 import { D3Scale, NumberLike, ScaleInput, ValueOf } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
-import { ReactNode, SVGProps } from 'react';
+import { ReactNode, Ref, SVGProps } from 'react';
 import Orientation from './constants/orientation';
 
 // In order to plot values on an axis, output of the scale must be number.
@@ -132,6 +132,8 @@ export type SharedAxisProps<Scale extends AxisScale> = CommonProps<Scale> & {
   axisClassName?: string;
   /** A left pixel offset applied to the entire axis. */
   left?: number;
+  /** The ref to the outermost axis group element. */
+  innerRef?: Ref<SVGGElement>;
   /** A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) scale function. */
   scale: Scale;
   /** An array of values that determine the number and values of the ticks. Falls back to `scale.ticks()` or `.domain()`. */

diff --git a/packages/visx-axis/test/Axis.test.tsx b/packages/visx-axis/test/Axis.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import { Line } from '@visx/shape';
 import { Text } from '@visx/text';
@@ -215,4 +216,15 @@ describe('<Axis />', () => {
     expect(points.at(2).prop('from')).toEqual({ x: 10.5, y: 0 });
     expect(points.at(2).prop('to')).toEqual({ x: 0.5, y: 0 });
   });
+
+  test('should expose its ref via an innerRef prop', () => {
+    const fakeRef = React.createRef<SVGGElement>();
+    const { container } = render(
+      <svg>
+        <Axis {...axisProps} innerRef={fakeRef} />
+      </svg>,
+    );
+    const AxisGroupElement = container.querySelector('g.visx-axis');
+    expect(fakeRef.current).toBe(AxisGroupElement);
+  });
 });