The whole picture
Canvas scale · 100%
Canvas controls
Adjusts bounded zoom and exposes fit and reset actions for a canvas.
Preview
In action
When to use
Use it for
- A canvas, diagram, map, or image with application-owned transforms.
Not for
- Rendering or panning the canvas; these controls emit zoom and action callbacks.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { CanvasControls } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/canvas-controls.
2. Vendor the source
npx @noorddev/vlak-cli add canvas-controls
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/canvas-controls.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { CanvasControls } from "@noorddev/vlak-react";
<CanvasControls zoom={zoom} onZoomChange={setZoom} minZoom={0.25} maxZoom={4} onFit={fitCanvas} onReset={resetPan} />Props
CanvasControls
Zoom, fit, and reset actions for a canvas. The canvas owns pan and rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
zoom | number | ||
defaultZoom | number | 1 | |
onZoomChange | (zoom: number) => void | ||
minZoom | number | 0.25 | |
maxZoom | number | 4 | |
step | number | 0.25 | |
onFit | () => void | ||
onReset | () => void | ||
disabled | boolean | false | |
label | string | "Canvas controls" |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Operates zoom, optional fit, and reset buttons. |
Accessibility
- Zoom has a visible numeric reading.
- Limits disable the corresponding zoom action.
- All actions keep at least a 44px target.
Markup
<div class="rs-canvas-controls" role="group" aria-label="Canvas controls"><button class="rs-btn-ghost rs-canvas-action" type="button" aria-label="Zoom out">−</button><output class="rs-canvas-zoom" aria-label="Zoom level">100%</output><button class="rs-btn-ghost rs-canvas-action" type="button" aria-label="Zoom in">+</button></div>
Classes
.rs-canvas-controls.rs-canvas-action.rs-canvas-zoom