react-responsive-image-map v0.0.1

react-responsive-image-map

A react component that renders out a responsive image-map.

Props

The image map takes all of the normal props (which point at a wrapper div), like className, style, etc.

id          // string, required, id for the image map (is used to map the image with map)
imageUrl    // string, required, url to the image
imageStyle  // object, optional, styles for the image
imageAlt    // string, optional, alt text for the image
areas       // array, optional, array of area objects (see below)

The area object

{
    id: 'my-map-area',  // string, required, Unique id for the area
    alt: 'Click here for action', // string, optional, Alt text
    shape: 'poly',  // string, required, shape, one of rect, circle, or poly
    onClick: (ev) => {  // func, optional, click event callback
        ev.preventDefault();
        console.log('Clicked on my hotspot');
    },
    href: '#', // string, optional, href
    coords: [717,1023,865,1001] // array, required, coordinates for the shape
}

Example usage

This is a simple example that renders out all the shapes.

import ImageMap from 'react-responsive-image-map';

[...]

<ImageMap
    id="my-map"
    imageUrl="https://placehold.it/300x300"
    imageStyle={{
        border: '1px solid red'
    }}
    imageAlt="placeholdit image, 300 by 300"
    areas={[
        {
            id: 'the-width',
            alt: 'The width text',
            shape: 'rect',
            onClick: (ev) => {
                ev.preventDefault();
                console.log('Clicked width');
            },
            coords: [132,166,82,136]
        },
        {
            id: 'the-height',
            alt: 'The height text',
            shape: 'rect',
            onClick: (ev) => {
                ev.preventDefault();
                console.log('Clicked height');
            },
            coords: [207,166,159,137]
        },
        {
            id: 'times',
            alt: 'The times text',
            shape: 'circle',
            onClick: (ev) => {
                ev.preventDefault();
                console.log('Clicked the circle');
            },
            coords: [146,155,12]
        },
        {
            id: 'powered-by',
            alt: 'Powered by text',
            shape: 'poly',
            onClick: (ev) => {
                ev.preventDefault();
                console.log('Clicked the poly');
            },
            coords: [132,293,186,292,193,287,197,292,207,292,219,291,288,292,289,277,218,278,206,282,194,275,132,278]
        },
    ]}
/>