React India Map Component

An interactive SVG India map component for React applications with TypeScript support. This component allows you to create clickable and hoverable state regions with custom data and styling.

Installation

npm install @vishalvoid/react-india-map

Usage

import { IndiaMap } from "@vishalvoid/react-india-map";
import type { StateData } from "@vishalvoid/react-india-map";

const App = () => {
  const mapStyle = {
    backgroundColor: "#ffffff",
    hoverColor: "#dddddd",
    tooltipConfig: {
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      textColor: "#ffffff",
    },
  };

  const stateData: StateData[] = [
    {
      id: "IN-MH",
      customData: {
        population: "123.2M",
        capital: "Mumbai",
      },
    },
  ];

  const handleStateHover = (stateId: string, stateInfo?: StateData) => {
    console.log(`Hovering over ${stateId}`, stateInfo);
  };

  const handleStateClick = (stateId: string, stateInfo?: StateData) => {
    console.log(`Clicked on ${stateId}`, stateInfo);
  };

  return (
    <IndiaMap
      mapStyle={mapStyle}
      stateData={stateData}
      onStateHover={handleStateHover}
      onStateClick={handleStateClick}
    />
  );
};

Props

interface TooltipConfig {
  backgroundColor?: string; // Default: "rgba(0, 0, 0, 0.8)"
  textColor?: string; // Default: "#ffffff"
}

interface MapStyle {
  backgroundColor?: string; // Default: "#ffffff"
  hoverColor?: string; // Default: "#dddddd"
  tooltipConfig?: TooltipConfig;
  stroke?: string; // Default: "#000000"
  strokeWidth?: number; // Default: 1
}

interface StateData {
  id: string; // State ID (e.g., "IN-MH")
  customData?: {
    [key: string]: any; // Custom state data
  };
}

interface IndiaMapProps {
  mapStyle?: MapStyle;
  stateData?: StateData[];
  onStateHover?: (stateId: string, stateInfo?: StateData) => void;
  onStateClick?: (stateId: string, stateInfo?: StateData) => void;
}

State IDs Reference

State/UT	ID	Capital
Andhra Pradesh	IN-AP	Amaravati
Arunachal Pradesh	IN-AR	Itanagar
Assam	IN-AS	Dispur
Bihar	IN-BR	Patna
Chhattisgarh	IN-CT	Raipur
Goa	IN-GA	Panaji
Gujarat	IN-GJ	Gandhinagar
Haryana	IN-HR	Chandigarh
Himachal Pradesh	IN-HP	Shimla
Jharkhand	IN-JH	Ranchi
Karnataka	IN-KA	Bengaluru
Kerala	IN-KL	Thiruvananthapuram
Madhya Pradesh	IN-MP	Bhopal
Maharashtra	IN-MH	Mumbai
Manipur	IN-MN	Imphal
Meghalaya	IN-ML	Shillong
Mizoram	IN-MZ	Aizawl
Nagaland	IN-NL	Kohima
Odisha	IN-OR	Bhubaneswar
Punjab	IN-PB	Chandigarh
Rajasthan	IN-RJ	Jaipur
Sikkim	IN-SK	Gangtok
Tamil Nadu	IN-TN	Chennai
Telangana	IN-TG	Hyderabad
Tripura	IN-TR	Agartala
Uttar Pradesh	IN-UP	Lucknow
Uttarakhand	IN-UT	Dehradun
West Bengal	IN-WB	Kolkata

Union Territories

Union Territory	ID	Capital
Andaman and Nicobar	IN-AN	Port Blair
Chandigarh	IN-CH	Chandigarh
Dadra and Nagar Haveli and Daman and Diu	IN-DN	Daman
Delhi	IN-DL	New Delhi
Jammu and Kashmir	IN-JK	Srinagar/Jammu
Ladakh	IN-LA	Leh
Lakshadweep	IN-LD	Kavaratti
Puducherry	IN-PY	Puducherry

Styling

You can customize the map appearance using CSS:

.india-map-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.india-map-container path {
  transition: fill 0.3s ease;
  stroke: #ffffff;
  stroke-width: 1;
}

.india-map-container path:hover {
  cursor: pointer;
  opacity: 0.8;
}

.state-tooltip {
  transition: opacity 0.2s;
}

Examples

Basic Usage with Hover Effect

import React, { useState } from "react";
import { IndiaMap } from "@vishalvoid/react-india-map";

const App = () => {
  const [activeState, setActiveState] = useState("");

  return (
    <IndiaMap
      mapStyle={{
        backgroundColor: "#f0f0f0",
        hoverColor: "#b3e0ff",
      }}
      onStateHover={(stateId) => setActiveState(stateId)}
    />
  );
};

With Custom State Data and Click Handler

import React from "react";
import { IndiaMap } from "@vishalvoid/react-india-map";
import type { StateData } from "@vishalvoid/react-india-map";

const App = () => {
  const stateData: StateData[] = [
    {
      id: "IN-MH",
      customData: {
        population: "123.2M",
        capital: "Mumbai",
        gdp: "$400B",
      },
    },
    {
      id: "IN-DL",
      customData: {
        population: "20.5M",
        capital: "New Delhi",
        gdp: "$110B",
      },
    },
  ];

  const handleStateClick = (stateId: string, data?: StateData) => {
    console.log(`Clicked ${stateId}:`, data?.customData);
    // You can show modal, navigate to state page, etc.
  };

  return (
    <IndiaMap
      stateData={stateData}
      onStateClick={handleStateClick}
      mapStyle={{
        backgroundColor: "#f8f9fa",
        hoverColor: "#acd5f2",
        stroke: "#ffffff",
        strokeWidth: 1,
        tooltipConfig: {
          backgroundColor: "rgba(0, 0, 0, 0.8)",
          textColor: "#ffffff",
        },
      }}
    />
  );
};

Publishing Updates

To publish a new version to NPM:

# Update version in package.json
npm version patch # or minor or major

# Build the package
npm run build

# Publish to NPM
npm publish

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

License

MIT License

Contributing

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