react-svg-pan-zoom-loader

This package allows us to load a SVG file remotely into react-svg-pan-zoom component.

Installation

YARN

yarn add react-svg-pan-zoom-loader

NPM

npm install --save react-svg-pan-zoom-loader

Usage

Example 1 :

import {ReactSvgPanZoomLoader} from 'react-svg-pan-zoom-loader'

...

return (
    <ReactSvgPanZoomLoader src="file/path/image.svg" render= {(content) => (
        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>  
        </ReactSVGPanZoom>
    )}/>
)

Example 2 with proxy node prop type, under here we can manipulate svg element attributes <SvgLoaderSelectElement/> component.

import {ReactSvgPanZoomLoader, SvgLoaderSelectElement} from 'react-svg-pan-zoom-loader'

...

return (
    <ReactSvgPanZoomLoader src="file/path/image.svg" proxy = {
        <> 
            <SvgLoaderSelectElement selector="#tree" onClick={onItemClick} 
            stroke={props.strokeColor}/> 
        </> 
    } render= {(content) => (

        <ReactSVGPanZoom width={500} height={500}>
            <svg width={500} height={500} >
                {content}
            </svg>  
        </ReactSVGPanZoom>

    )}/>
)

Live Demo

Contributors

• nufaylr (author)
• chrvadala