react-interactive-svg

A react component that helps you make svg shapes interactives

Coding style

How to use

Import the component and the svg file like so:

    import { ReactComponent as Svg } from './your-svg-path.svg'
    import SvgWrapper from 'react-interactive-svg'

Wrap the SVG file using the SvgWrapper component and create a reference inside the svg file

    <SvgWrapper>
        <Svg ref={React.createRef()} />
    </SvgWrapper>

Insert the neccesary props to the wrapper component

    ...
    <SvgWrapper
        onElementHover={someFunction}
        onElementClicked={someOtherFunction}
        hoverBorderColor='#FFFF'
        activeColor='green'
        defaultHoverBorder='#000'
        allowedShapes=['polygon']
    >
    ...

How should a "onElementClicked" function look like?

    // This function may be async if needed the wrapper will await its execution
    const elementClicked = async (e) => {
        // try/catch 'cause we are good devs
        try {
            // The function receives the event of the clicked element

            // Do your thing
            await someOperation()

            // We must return a boolean true/false if we want to change the active color
            return true
        } catch (e) {
            console.log(e)
            return false
        }
    }

Props

PROP	TYPE	DESCRIPTION	DEFAULT VALUE	REQUIRED
onElementHover	Function	This is a callback function that gets triggered when hovering over the svg shapes.		False
onElementClicked	Function	This is a callback function that gets triggered when clicking over the svg shapes. This function should return a boolean to change the active color.		False
hoverBorderColor	String	This prop determines the boder color of the shape when hovered.	#009cff82	False
defaultHoverBorder	String	This prop determines the default boder color of the shape when mouseout event occurs.	black	False
activeColor	String	This prop determines the fill color of the shape when the onElementClicked function returns a true boolean.	#009cff82	False
allowedShapes	Array	This prop determines the shapes that will be parsed by the svg component.	['polygon', 'rect', 'circle']	False

Author

Alfonso Gomez 💬 📖🔧 👀 😎

License

This project is licensed under the ISC License