diff --git a/packages/visx-axis/src/axis/Axis.tsx b/packages/visx-axis/src/axis/Axis.tsx index 508076a03..529323bba 100644 --- a/packages/visx-axis/src/axis/Axis.tsx +++ b/packages/visx-axis/src/axis/Axis.tsx @@ -20,6 +20,7 @@ export default function Axis({ hideAxisLine = false, hideTicks = false, hideZero = false, + innerRef, left = 0, numTicks = 10, orientation = Orientation.bottom, @@ -69,7 +70,7 @@ export default function Axis({ }); return ( - + {children({ ...restProps, axisFromPoint, diff --git a/packages/visx-axis/src/types.ts b/packages/visx-axis/src/types.ts index 69129ee74..ea3d68e0e 100644 --- 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 = CommonProps & { axisClassName?: string; /** A left pixel offset applied to the entire axis. */ left?: number; + /** The ref to the outermost axis group element. */ + innerRef?: Ref; /** 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 index ba1bed10d..7fd3d0769 100644 --- 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('', () => { 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(); + const { container } = render( + + + , + ); + const AxisGroupElement = container.querySelector('g.visx-axis'); + expect(fakeRef.current).toBe(AxisGroupElement); + }); });