rim

@qiuz/react-image-map

react image map

Showing:

Popularity

Downloads/wk

331

GitHub Stars

23

Maintenance

Last Commit

14d ago

Contributors

3

Package

Dependencies

2

Size (min+gzip)

0.1KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

ImageMap

GitHub Workflow Status npm

A percent react image map compnent

简体中文

Installation

$ yarn add @qiuz/react-image-map
# or
$ npm install @qiuz/react-image-map

Get mapArea

open http://blog.qiuz.site/q/react-image-map/

and select yourself img

you can add ?imgSrc=${url} like:

http://blog.qiuz.site/q/react-image-map/?imgSrc=http://5b0988e595225.cdn.sohucs.com/images/20170920/2a178d11bc8b4178a387398b5658e105.jpeg

imgSrc is img url

page

Usage

import { ImageMap } from '@qiuz/react-image-map';

Props

ImageMapProps(extend React.ImgHTMLAttributes)

NameTypeDefault
classNameString''
srcString''
onClick() => voidnoop
onMapClick(area: Area, index: number) => voidnoop
mapArea[][]

Area(extend React.SpanHTMLAttributes)

NameTypeDefault
leftString0
topString0
widthString0
heightstring0
styleReact.CSSProperties{}
render(area: Area, index: number) => React.ReactNodenull

CHANGELOG

  • access all React.Img props, including events and attributes(like onMounse events and img alt attr.)
  • image map can use render to custom your ReactNode(2021.4.9))

Example

online example

const img = 'https://images.app.goo.gl/STr3xKQMbdjLketR7';

const mapArea: Area[] = [
  {
    left: '0%',
    top: '6%',
    height: '12%',
    width: '33%',
    style: { background: 'rgba(255, 0, 0, 0.5)' },
    onMouseOver: () => console.log('map onMouseOver')
  },
  {
    width: '33%',
    height: '12%',
    left: '0%',
    top: '36.37931034482759%',
    style: { background: 'rgba(255, 0, 0, 0.5)' },
    render: (area: any, index: number) => (
      <span
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
          background: 'rgba(255, 255, 0, 0.5)'
        }}
      >
        can render map node
      </span>
    ),
    onMouseOver: () => console.log('map onMouseOver')
  }
];

const onMapClick = (area, index) => {
    const tip = `click map${index + 1}`;
    console.log(tip, area);
    alert(tip);
}

<ImageMap
    className="usage-map"
    src={img}
    map={mapArea}
    onMapClick={onMapClick}
/>

// in hooks
const ImageMapComponent = React.useMemo(() => <ImageMap className="usage-map" src={img} map={mapArea} onMapClick={onMapClick} />, [mapArea, img]);

return (
    ...

    {ImageMapComponent}

    ...
)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial