CynosureComponents / Structure
ZoomControls
Zoom out, the current percent with a menu of choices, and zoom in.
When to useLink to "When to use"
- Beside a zoomable view, such as a DocumentViewport, so zoom does not depend on a wheel or a pinch.
UsageLink to "Usage"
tsx
<ZoomControls zoom={zoom} percent={scale * 100} onZoomChange={setZoom} />Pass the percent the view came to (DocumentViewport's onScaleChange times 100): fit modes depend on the viewport, so only the view knows it.
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
zoomRequired | The setting now (fit or a percent). | ZoomSetting | |
percentRequired | The percent it comes to now (DocumentViewport's onScaleChange times 100): shown, and stepped from. | number | |
onZoomChangeRequired | Called with the new setting when the person zooms in or out, or picks one from the menu. | (zoom: ZoomSetting) => void | |
min | The smallest percent zoom out goes to (a PanZoomCanvas's min). Default 25. | number | 25 |
max | The largest percent zoom in goes to (a PanZoomCanvas's max). Default 800. | number | 800 |
presets | The percents offered in the menu (those between min and max). Default 50, 75, 100, 125, 150, 200, 400. | number[] | 50 |
size | Size of the three buttons. Default "sm". | Size | "sm" |
labels | Replace the built-in English text: the names of the toolbar, the buttons and the fit modes. | Partial<ZoomControlsLabels> | |
className | Added to the toolbar element, for layout. | string | |
style | Layout only. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
- Role: a toolbar named "Zoom": one tab stop; Left and Right move between zoom out, the menu and zoom in.
- Menu: fit width, fit page and preset percents as a radio set; the current one is checked, and choosing closes the menu.
- Limits: zoom in stops at 800% and zoom out at 25% (the buttons disable); give
minandmaxfor a view with other limits (a PanZoomCanvas at 20 to 300%). The menu offers only presets between them. - Touch: 44px hit areas on touch screens.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.