react-svgmap-india
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

React SVG Map India

This package generates an interactive SVG map of India. It allows users to highlight states on hover and retrieve the value of the selected state. The map includes all states and union territories of India.

India Map

Installation

Install the package via npm:

npm install react-svgmap-india

State List

The following are the states and UTs mapped with its ID.

const states = {
  'AN': 'Andaman and Nicobar Islands',
  'AP': 'Andhra Pradesh',
  'AR': 'Arunachal Pradesh',
  'AS': 'Assam',
  'BR': 'Bihar',
  'CH': 'Chandigarh',
  'CT': 'Chhattisgarh',
  'DD': 'Dadra and Nagar Haveli and Daman and Diu',
  'DL': 'Delhi',
  'DN': 'Daman and Diu',
  'GA': 'Goa',
  'GJ': 'Gujarat',
  'HP': 'Himachal Pradesh',
  'HR': 'Haryana',
  'JH': 'Jharkhand',
  'JK': 'Jammu and Kashmir',
  'KA': 'Karnataka',
  'KL': 'Kerala',
  'LA': 'Ladakh',
  'LD': 'Lakshadweep',
  'MH': 'Maharashtra',
  'ML': 'Meghalaya',
  'MN': 'Manipur',
  'MP': 'Madhya Pradesh',
  'MZ': 'Mizoram',
  'NL': 'Nagaland',
  'OR': 'Odisha',
  'PB': 'Punjab',
  'PY': 'Puducherry',
  'RJ': 'Rajasthan',
  'SK': 'Sikkim',
  'TG': 'Telangana',
  'TN': 'Tamil Nadu',
  'TR': 'Tripura',
  'UP': 'Uttar Pradesh',
  'UT': 'Uttarakhand',
  'WB': 'West Bengal'
}

Usage

'use client'

import { useState } from 'react'
import IndiaMap from 'react-svgmap-india'

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

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

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.

Package Sidebar

Install

npm i react-svgmap-india

Weekly Downloads

3

Version

2.0.1

License

ISC

Unpacked Size

209 kB

Total Files

8

Last publish

Collaborators

  • arav-ind