Data utilities
Umbrella package
@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 ResizeObserver
s 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
<Responsive.ParentSize />
APIs
#<ParentSize />
(args: { ref: HTMLDivElement; resize: (state: ParentSizeState) => void; } & ParentSizeState) => ReactNode
required Child render function ({ width, height, top, left, ref, resize }) => ReactNode
.
string
Optional className
to add to the parent div
wrapper used for size measurement.
number
Child render updates upon resize are delayed until debounceTime
milliseconds after the last resize event is observed.
Default 300
boolean
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
"width" | "height" | "top" | "left" | ("width" | "height" | "top" | "left")[]
Optional dimensions provided won't trigger a state change when changed.
CSSProperties
Optional style
object to apply to the parent div
wrapper used for size measurement.
ResizeObserverPolyfill
Optionally inject a ResizeObserver polyfill, else this must be globally available.
#<ScaleSVG />
ReactNode
Child SVG to scale, rendered as the child of the parent wrappers provided by this component <div><svg>{children}</svg></div>
.
ReactText
Height of the desired SVG.
Ref<SVGSVGElement>
Ref to the parent <svg />
used for scaling.
string
Whether to preserve SVG aspect ratio.
Default xMinYMin meet
ReactText
Width of the desired SVG.
ReactText
xOrigin of the desired SVG.
Default 0
ReactText
yOrigin of the desired SVG.
Default 0