@visx/responsive

The @visx/responsive package is here to help you make responsive graphs.

Enhancers

withScreenSize

withParentSize

Components

ParentSize

ScaleSVG

withScreenSize

If you would like your graph to adapt to the screen size, you can use withScreenSize(). The resulting component will pass screenWidth and screenHeight props to the wrapped component containing the respective screen dimensions.

Example:

import { withScreenSize } from '@visx/responsive';
// or
// import * as Responsive from '@visx/responsive';
// Responsive.withScreenSize(...);

let chartToRender = withScreenSize(MySuperCoolVisxChart);

// ... Render the chartToRender somewhere

withParentSize

If you would like your graph to adapt to it's parent component's size, you can use withParentSize(). The resulting component will pass parentWidth and parentHeight props to the wrapped component containing the respective parent's dimensions.

Example:

import { withParentSize } from '@visx/responsive';
// or
// import * as Responsive from '@visx/responsive';
// Responsive.withParentSize(...);

let chartToRender = withParentSize(MySuperCoolVisxChart);

// ... Render the chartToRender somewhere

ParentSize

You might do the same thing using the ParentSize component.

Example:

import { ParentSize } from '@visx/responsive';
// or
// import * as Responsive from '@visx/responsive';
// <Responsive.ParentSize />;

let chartToRender = (
  <ParentSize>
    {(parent) => (
      <MySuperCoolVisxChart
        parentWidth={parent.width}
        parentHeight={parent.height}
        parentTop={parent.top}
        parentLeft={parent.left}
        // this is the referrer to the wrapper component
        parentRef={parent.ref}
        // this function can be called inside MyVisxChart to cause a resize of the wrapper component
        resizeParent={parent.resize}
      />
    )}
  </ParentSize>
);

// ... Render the chartToRender somewhere

ScaleSVG

You can also create a responsive chart with a specific viewBox with the ScaleSVG component.

Example:

import { ScaleSVG } from '@visx/responsive';
// or
// import * as Responsive from '@visx/responsive';
// <Responsive.ScaleSVG />

let chartToRender = (
  <ScaleSVG width={400} height={400}>
    <MySuperCoolVXChart />
  </ScaleSVG>
);

// ... Render the chartToRender somewhere

⚠️ ResizeObserver dependency

The ParentSize component and withParentSize enhancer rely on ResizeObservers for auto-sizing. If you need a polyfill, you can either polute the window object or inject it cleanly through props:

import { ResizeObserver } from 'your-favorite-polyfill';

function App() {
  return (
    <ParentSize resizeObserverPolyfill={ResizeObserver} {...}>
      {() => {...}}
    </ParentSize>
  );

Installation

npm install --save @visx/responsive

Examples

APIs

#<ParentSize />

# children(args: { ref: HTMLDivElement; resize: (state: ParentSizeState) => void; } & ParentSizeState) => ReactNoderequired

Child render function ({ width, height, top, left, ref, resize }) => ReactNode.

# classNamestring

Optional className to add to the parent div wrapper used for size measurement.

# debounceTimenumber

Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.

Default 300

# enableDebounceLeadingCallboolean

Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true)

Default true

# ignoreDimensions"width" | "height" | "top" | "left" | ("width" | "height" | "top" | "left")[]

Optional dimensions provided won't trigger a state change when changed.

# parentSizeStylesCSSProperties

Optional style object to apply to the parent div wrapper used for size measurement.

# resizeObserverPolyfillResizeObserverPolyfill

Optionally inject a ResizeObserver polyfill, else this must be globally available.

#<ScaleSVG />

# childrenReactNode

Child SVG to scale, rendered as the child of the parent wrappers provided by this component <div><svg>{children}</svg></div>.

# heightReactText

Height of the desired SVG.

# innerRefRef<SVGSVGElement>

Ref to the parent <svg /> used for scaling.

# preserveAspectRatiostring

Whether to preserve SVG aspect ratio.

Default xMinYMin meet

# widthReactText

Width of the desired SVG.

# xOriginReactText

xOrigin of the desired SVG.

Default 0

# yOriginReactText

yOrigin of the desired SVG.

Default 0