# @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

## Components

- ParentSize
- ScaleSVG

## API

### <ParentSize />

# ParentSize.children<func> `required`

# ParentSize.className<string>

# ParentSize.debounceTime<number>

Default | 300

### <ScaleSVG />

# ScaleSVG.children<func>

# ScaleSVG.height<union(number|string)>

# ScaleSVG.innerRef<func>

# ScaleSVG.preserveAspectRatio<string>

Default | 'xMinYMin meet'

# ScaleSVG.width<union(number|string)>

# ScaleSVG.xOrigin<union(number|string)>

Default | 0

# ScaleSVG.yOrigin<union(number|string)>

Default | 0