# react-svgmap-japan

> Interactive SVG Map of Japan with hover and click functionality

Latest version **1.1.0** (published 2024-12-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-svgmap-japan
pnpm add react-svgmap-japan
yarn add react-svgmap-japan
bun add react-svgmap-japan
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-12-09 |
| First published | 2024-02-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 190.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Aravind D |
| Maintainers | arav-ind |
| Keywords | japan, svgmap, 地図, 日本, 日本の地図, japanmap, svgmap-japan, react, map component japan, Japanese map |

## Links

- npm: https://www.npmjs.com/package/react-svgmap-japan
- Repository: https://github.com/arav-ind/react-svgmap-japan
- Homepage: https://github.com/arav-ind/react-svgmap-japan#readme
- Issues: https://github.com/arav-ind/react-svgmap-japan/issues
- npm.io page: https://npm.io/package/react-svgmap-japan

## 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.0 (latest) — 2024-12-09
- 1.0.2 — 2024-02-25
- 1.0.1 — 2024-02-25
- 1.0.0 — 2024-02-25

## README

# React SVG Map Japan

This package generates an interactive SVG map of Japan. It allows users to highlight states on hover and retrieve the value of the selected state.

![Japan Map](./svgmap.gif)

## Installation

Install the package via npm:

```bash
npm install react-svgmap-japan
```

## Prefecture List

The following are the prefectures mapped with its ID.

```js
const prefectures = {
  AIC: 'Aichi',
  AKI: 'Akita',
  AOM: 'Aomori',
  CHB: 'Chiba',
  EHM: 'Ehime',
  FKU: 'Fukui',
  FKO: 'Fukuoka',
  FSH: 'Fukushima',
  GIF: 'Gifu',
  GNM: 'Gunma',
  HYG: 'Hyogo',
  HOK: 'Hokkaido',
  HRS: 'Hiroshima',
  IBR: 'Ibaraki',
  ISH: 'Ishikawa',
  IWT: 'Iwate',
  KCH: 'Kochi',
  KGG: 'Kagawa',
  KMT: 'Kumamoto',
  KNG: 'Kanagawa',
  KGS: 'Kagoshima',
  KYO: 'Kyoto',
  MIE: 'Mie',
  MGI: 'Miyagi',
  MYZ: 'Miyazaki',
  NGT: 'Niigata',
  NGN: 'Nagano',
  NRA: 'Nara',
  NGS: 'Nagasaki',
  OKN: 'Okinawa',
  OSK: 'Osaka',
  OKY: 'Okayama',
  OIT: 'Oita',
  SGA: 'Saga',
  SHG: 'Shiga',
  SHM: 'Shimane',
  STM: 'Saitama',
  SZK: 'Shizuoka',
  TCG: 'Tochigi',
  TKY: 'Tokyo',
  TSJ: 'Tokushima',
  TTR: 'Tottori',
  TYM: 'Toyama',
  WKM: 'Wakayama',
  YMG: 'Yamaguchi',
  YMN: 'Yamanashi',
  YGT: 'Yamagata'
}
```

## Usage

```jsx
'use client'

import { useState } from 'react'
import JapanMap from 'react-svgmap-japan'

export default function MapComponent() {
    const [state, setState] = useState('')

    return (
        <>
            <div>{state}</div>
            <JapanMap
                onClick={(selectedValue: string) => setState(selectedValue)}
                size='500px'
                mapColor='white'
                strokeColor='#4f4f4f'
                strokeWidth='1'
                hoverColor='#3d3d3d'
            />
        </>
    )
}
```

## Props Available

| Props       | Description                                             | Requirement | Default Value |
|-------------|---------------------------------------------------------|-------------|---------------|
| onClick     | Callback function to get the selected state value.      | Required    | NA            |
| className   | Custom classname for the map component.                 | Optional    | "svgmap"      |
| size        | Width of the map.                                       | Optional    | "inherit"     |
| mapColor    | Color of the map.                                       | Optional    | "#ffffff"     |
| strokeColor | Border color of each state.                             | Optional    | "#000000"     |
| strokeWidth | Border width of each state.                             | Optional    | "0.5"         |
| hoverColor  | Color of the state while hovering on it.                | Optional    | "#303030"     |


## Contributing

Pull requests are welcome.

## Credits

Reference of SVG map taken from [MAPSVG](https://mapsvg.com/maps).

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