@vx/responsive
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.199 • Public • Published

    @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
    

    Install

    npm i @vx/responsive

    DownloadsWeekly Downloads

    60,337

    Version

    0.0.199

    License

    MIT

    Unpacked Size

    52 kB

    Total Files

    23

    Last publish

    Collaborators

    • hshoff
    • christopher.card.williams
    • vx-hshoff