1.1.8 • Published 3 years ago

@qiuz/react-image-map v1.1.8

Weekly downloads
248
License
MIT
Repository
github
Last release
3 years ago

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)
  • use inline style for fix nextjs global css import issue(2022.4.16)

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}

	...
)
1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.1

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.0

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.9

4 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.4

5 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.1.25

6 years ago

0.1.23

6 years ago

0.1.22

6 years ago

0.1.18

6 years ago

0.1.16

6 years ago

0.1.15

6 years ago

0.1.13

6 years ago

0.1.5

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago