search

chrvadala / react-svg-pan-zoom

:eyes: A React component that adds pan and zoom features to SVG
https://chrvadala.github.io/react-svg-pan-zoom/
MIT License
677 stars 125 forks source link

Added SVGIsReactComponent prop to allow React child #174

Closed joostdecock closed 3 years ago

joostdecock commented 4 years ago

This pull request adds support for using this component to add pan/zoom to React components that render SVG (currently, it only works for native svg elements).

I have a react component that renders SVG, and was looking to add pan/zoom to it. react-svg-pan-zoom would be perfect for that, except that it checks that it gets passed a single child of type svg. That check fails when you wrap another React component.

I have added a prop named SVGIsReactComponent that has a default value of false. Setting it to true will skip the props.children check and simply render the wrapped component.

It works fine for this use-case: Screenshot_2020-04-19 hugo

The wrapped component not only displays correctly, I can also still interact with it.

This should have no impact whatsoever if the SVGIsReactComponent prop is not set (or set to false).

coveralls commented 4 years ago

Coverage Status

Coverage decreased (-0.3%) to 39.399% when pulling 94a01e05cfb23fcce339ecceb714c263518c4b19 on freesewing:master into 749bf82be7cdd6ae7385a3886d058e526e3e2db9 on chrvadala:master.