# @vx/responsive

    npm install --save @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