A React library to pan and zoom SVGs using their viewbox, like nature intended
A lot of React pan and zoom libraries use CSS transforms, which are great, except when the element is a <svg>, in which case we already have the viewbox attr to do this for us, we just need to tell it some values.
https://react-svg-viewbox-zoom.vercel.app
npm install --save react-svg-viewbox-zoom- Create a component that takes a
viewBoxprop and returns your SVG with it. - Create an array with four numbers corresponding to the initial
viewBoxvalues to start with. - Pass both of those to
<SVGViewBoxZoom />
import React from "react"
import SVGViewBoxZoom from "react-svg-viewbox-zoom"
const MySVG = ({viewBox}) => {
return (
<svg height="100" width="100" viewBox={viewBox} >
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="1"/>
</svg>
)
}
const App = () => {
return (
<div>
<SVGViewboxZoom
initivalViewboxValues={[0, 0, 100, 100]}
SVG={MySVG}
/>
</div>
);
}MIT © stephenhmarsh