# @qiuz/react-image-map

> A percent react image map compnent -

Latest version **1.1.8** (published 2022-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @qiuz/react-image-map
pnpm add @qiuz/react-image-map
yarn add @qiuz/react-image-map
bun add @qiuz/react-image-map
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2022-04-27 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 20.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | qiuz |
| Maintainers | qiuz |
| Keywords | react-iamge-map, react, hooks, image-map, image, img map, map, react-component, component, frontend |

## Links

- npm: https://www.npmjs.com/package/@qiuz/react-image-map
- Repository: https://github.com/qiuziz/react-image-map
- Homepage: http://blog.qiuz.site/react-image-map
- Issues: https://github.com/qiuziz/react-image-map/issues
- npm.io page: https://npm.io/package/@qiuz/react-image-map

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.8.6
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.8 (latest) — 2022-04-27
- 1.1.7 (undefined) — 2022-04-27
- 1.1.5 — 2022-04-16
- 1.1.3 — 2021-05-07
- 1.1.2 — 2021-05-07
- 1.1.1 — 2021-05-07
- 1.1.0 — 2021-04-09
- 1.0.17 — 2021-04-09
- 1.0.16 — 2021-02-19
- 1.0.15 — 2021-02-01
- 1.0.14 — 2021-01-30
- 1.0.13 — 2021-01-27
- 1.0.12 — 2021-01-27
- 1.0.11 — 2021-01-26
- 1.0.9 — 2021-01-25
- … 18 more at https://npm.io/package/@qiuz/react-image-map/versions

## README

## ImageMap

[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/qiuziz/react-image-map/CI?label=Github%20Actions)](https://github.com/qiuziz/react-image-map/actions?query=workflow%3ACI)
[![npm](https://img.shields.io/npm/v/@qiuz/react-image-map)](https://www.npmjs.com/package/@qiuz/react-image-map)

> A percent react image map compnent

[简体中文](https://github.com/qiuziz/react-image-map/blob/master/README-CN.md)

### Installation

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

### Get mapArea

open [http://blog.qiuz.site/q/react-image-map/](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](http://blog.qiuz.site/q/react-image-map/?imgSrc=http://5b0988e595225.cdn.sohucs.com/images/20170920/2a178d11bc8b4178a387398b5658e105.jpeg)


> `imgSrc` is img url

![page](https://raw.githubusercontent.com/qiuziz/react-image-map/master/src/assets/images/page.png)

### Usage

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

## Props

#### ImageMapProps(extend React.ImgHTMLAttributes)

| Name         | Type                                      | Default |
| :----------- | :---------------------------------------- | :------ |
| `className`  | `String`                                  | `''`    |
| `src`        | `String`                                  | `''`    |
| `onClick`    | `() => void`                              | `noop`  |
| `onMapClick` | `(area: Area, index: number) => void`     | `noop`  |
| `map`        | `Area[]`                                  | `[]`    |




#### Area(extend React.SpanHTMLAttributes)
| Name         | Type                                            | Default |
| :----------- | :--------------------------------------------   | :------ |
| `left`  		 | `String`                                        | `0`     |
| `top`        | `String`                                        | `0`     |
| `width`      | `String`                                        | `0`     |
| `height`     | `string`                                        | `0`     |
| `style`      | `React.CSSProperties`                           | `{}`    |
| `render`     | `(area: Area, index: number) => React.ReactNode`| `null`  |

## 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](https://codesandbox.io/s/silent-bash-c6zwx)

```jsx
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}

	...
)
```

---
_Source: https://npm.io/package/@qiuz/react-image-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._