@vx/responsive

@vx/responsive

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

With Enhancers

withScreenSize

withParentSize

With 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 '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// Responsive.withScreenSize(...);

let chartToRender = withScreenSize(MySuperCoolVxChart);

// ... 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 '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// Responsive.withParentSize(...);

let chartToRender = withParentSize(MySuperCoolVxChart);

// ... Render the chartToRender somewhere

ParentSize

You might do the same thing using the ParentSize component.

Example:

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

let chartToRender = (
  <ParentSize>
    {parent => (
      <MySuperCoolVxChart
        parentWidth={parent.width}
        parentHeight={parent.height}
        parentTop={parent.top}
        parentLeft={parent.left}
        // this is the referer to the wrapper component
        parentRef={parent.ref}
        // this function can be called inside MySuperCoolVxChart 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 '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// <Responsive.ScaleSVG />

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

// ... Render the chartToRender somewhere

Installation

npm install --save @vx/responsive

Changelog

v0.0.197

:rocket: Enhancements

• feat(tooltip): add unstyled prop to TooltipWithBounds #721
• perf(tooltip): use useCallback in useTooltip #668

:bug: Bug Fix

• fix(zoom): fix zoom.dragMove on touchmove event y-coord #725

:memo: Documentation

• feat(demo): new documentation, codesandbox examples #732 #731 #730 #729 #727 #720#720 #719 #718 #717 #716 #715 #714 #713 #712 #711 #710 #709 #708 #707 #706 #705 #704 #703 #702 #701 #700 #699 #698 #697 #696 #695 #694 #693 #692 #691 #690 #689 #688 #687 #686 #685 #684 #683 #682 #681 #680 #679 #678 #677 #676 #675 #674 #673 #672 #671 #670 #679

:house: Internal

• deps(root): bump yarn.lock, add @types/webpack #740
• fix(demo/package.json): lock next.js version #740
• fix(demo): prettier config updated so lots of minor style updates #740
• fix(demo/next.config.js): fix invalid webpack config error #740
• fix(demo/pages): routes are case sensitive (/Docs => /docs) #740
• feat(demo/gallery): gallery filter persists on query param ?pkg instead of local state #740

:trophy: Contributors

• dennisja
• vodoleev-vladislav
• williaster
• hshoff

Changes: 
 - @vx/annotation: 0.0.196 => 0.0.197
 - @vx/axis: 0.0.196 => 0.0.197
 - @vx/bounds: 0.0.196 => 0.0.197
 - @vx/brush: 0.0.196 => 0.0.197
 - @vx/chord: 0.0.196 => 0.0.197
 - @vx/clip-path: 0.0.196 => 0.0.197
 - @vx/curve: 0.0.196 => 0.0.197
 - @vx/demo: 0.0.196 => 0.0.197
 - @vx/drag: 0.0.196 => 0.0.197
 - @vx/event: 0.0.196 => 0.0.197
 - @vx/geo: 0.0.196 => 0.0.197
 - @vx/glyph: 0.0.196 => 0.0.197
 - @vx/gradient: 0.0.196 => 0.0.197
 - @vx/grid: 0.0.196 => 0.0.197
 - @vx/group: 0.0.196 => 0.0.197
 - @vx/heatmap: 0.0.196 => 0.0.197
 - @vx/hierarchy: 0.0.196 => 0.0.197
 - @vx/legend: 0.0.196 => 0.0.197
 - @vx/marker: 0.0.196 => 0.0.197
 - @vx/mock-data: 0.0.196 => 0.0.197
 - @vx/network: 0.0.196 => 0.0.197
 - @vx/pattern: 0.0.196 => 0.0.197
 - @vx/point: 0.0.196 => 0.0.197
 - @vx/responsive: 0.0.196 => 0.0.197
 - @vx/scale: 0.0.196 => 0.0.197
 - @vx/shape: 0.0.196 => 0.0.197
 - @vx/stats: 0.0.196 => 0.0.197
 - @vx/text: 0.0.196 => 0.0.197
 - @vx/threshold: 0.0.196 => 0.0.197
 - @vx/tooltip: 0.0.196 => 0.0.197
 - @vx/voronoi: 0.0.196 => 0.0.197
 - @vx/vx: 0.0.196 => 0.0.197
 - @vx/zoom: 0.0.16 =>  0.0.19