react-interactive-svg v1.0.2

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

Author

License

This project is licensed under the ISC License