🇮🇳 @aryanjsx/indiamap

An elegant, interactive SVG map of India for React applications

Installation • Usage • Props • State Codes • Examples • Contributing

---

✨ Features

• 🗺️ Complete Coverage — All 28 states and 8 union territories of India
• 🎨 Fully Customizable — Colors, sizes, and styles to match your design
• 🖱️ Interactive — Smooth hover effects and click handling
• ⌨️ Accessible — Full keyboard navigation and ARIA support
• 📦 Lightweight — Zero external dependencies
• 🔷 TypeScript — Complete type definitions included
• ⚡ Performant — Optimized with React hooks and memoization

---

📦 Installation

# npm
npm install @aryanjsx/indiamap

# yarn
yarn add @aryanjsx/indiamap

# pnpm
pnpm add @aryanjsx/indiamap

---

🚀 Usage

Basic Example

import { useState } from 'react'
import IndiaMap from '@aryanjsx/indiamap'

function App() {
  const [selectedState, setSelectedState] = useState('')

  return (
    <div>
      <h2>Selected: {selectedState || 'Click a state'}</h2>
      <IndiaMap
        onClick={(stateCode) => setSelectedState(stateCode)}
        size="500px"
        mapColor="#ffffff"
        strokeColor="#4a4a4a"
        strokeWidth="0.5"
        hoverColor="#ff9933"
      />
    </div>
  )
}

Next.js / App Router

'use client'

import { useState } from 'react'
import IndiaMap from '@aryanjsx/indiamap'

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

  return (
    <IndiaMap
      onClick={setState}
      size="100%"
      mapColor="#f8fafc"
      strokeColor="#334155"
      hoverColor="#0ea5e9"
    />
  )
}

With TypeScript

import { useState } from 'react'
import IndiaMap from '@aryanjsx/indiamap'

const MapComponent: React.FC = () => {
  const [selectedState, setSelectedState] = useState<string>('')

  const handleStateClick = (stateCode: string): void => {
    setSelectedState(stateCode)
    console.log(`Selected: ${stateCode}`)
  }

  return (
    <IndiaMap
      onClick={handleStateClick}
      size="600px"
      mapColor="#1e293b"
      strokeColor="#475569"
      strokeWidth="0.5"
      hoverColor="#22c55e"
      className="india-map"
    />
  )
}

export default MapComponent

---

📋 Props

Prop	Type	Required	Default	Description
onClick	(stateCode: string) => void	✅	—	Callback fired when a state is clicked
className	string	❌	"svgmap"	CSS class for the container
size	string	❌	"inherit"	Width of the map (e.g., "500px", "100%")
mapColor	string	❌	"#ffffff"	Default fill color for states
strokeColor	string	❌	"#000000"	Border color for states
strokeWidth	string	❌	"0.5"	Border width for states
hoverColor	string	❌	"#303030"	Fill color on hover/focus

---

🗺️ State Codes

The map uses ISO-style 2-letter codes for each state and union territory:

📍 States (28)

Code	State
AP	Andhra Pradesh
AR	Arunachal Pradesh
AS	Assam
BR	Bihar
CT	Chhattisgarh
GA	Goa
GJ	Gujarat
HR	Haryana
HP	Himachal Pradesh
JH	Jharkhand
KA	Karnataka
KL	Kerala
MP	Madhya Pradesh
MH	Maharashtra
MN	Manipur
ML	Meghalaya
MZ	Mizoram
NL	Nagaland
OR	Odisha
PB	Punjab
RJ	Rajasthan
SK	Sikkim
TN	Tamil Nadu
TG	Telangana
TR	Tripura
UP	Uttar Pradesh
UT	Uttarakhand
WB	West Bengal

🏛️ Union Territories (8)

Code	Union Territory
AN	Andaman and Nicobar Islands
CH	Chandigarh
DD	Dadra and Nagar Haveli and Daman and Diu
DL	Delhi
JK	Jammu and Kashmir
LA	Ladakh
LD	Lakshadweep
PY	Puducherry

Quick Reference

const stateNames = {
  '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',
  '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'
}

---

🎨 Examples

Dark Theme

<IndiaMap
  onClick={handleClick}
  size="100%"
  mapColor="#1a1a2e"
  strokeColor="#4a4a6a"
  strokeWidth="0.5"
  hoverColor="#e94560"
/>

Tricolor Theme (Indian Flag Colors)

<IndiaMap
  onClick={handleClick}
  size="500px"
  mapColor="#ffffff"
  strokeColor="#138808"
  strokeWidth="1"
  hoverColor="#ff9933"
/>

Minimal Light

<IndiaMap
  onClick={handleClick}
  size="100%"
  mapColor="#f1f5f9"
  strokeColor="#cbd5e1"
  strokeWidth="0.25"
  hoverColor="#3b82f6"
/>

Navigation Example

import { useNavigate } from 'react-router-dom'
import IndiaMap from '@aryanjsx/indiamap'

function ExploreMap() {
  const navigate = useNavigate()

  const handleStateClick = (stateCode) => {
    navigate(`/state/${stateCode.toLowerCase()}`)
  }

  return (
    <IndiaMap
      onClick={handleStateClick}
      size="100%"
      mapColor="#ecfdf5"
      strokeColor="#059669"
      hoverColor="#10b981"
    />
  )
}

---

♿ Accessibility

This component is built with accessibility in mind:

• Keyboard Navigation — Tab through states, press Enter or Space to select
• ARIA Labels — Screen reader support with descriptive labels
• Focus Indicators — Visual focus states that mirror hover styles
• Semantic SVG — Proper role and aria-label attributes

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

ISC © Aryan

---

🙏 Credits

• SVG map reference from MAPSVG

---

⬆ Back to Top

Made with ❤️ in India