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

License

This project is licensed under the ISC License