🇮🇳 react-india-drilldown-map

A zero-dependency, multi-level interactive SVG Drill-Down Map component for India built with React.

Renders choropleth data maps, trend percentage badges, breadcrumb navigation, tooltips, and custom theme presets across 5 administrative levels of Indian geography directly out of the box.

---

🌐 Live Preview

Try it live on CodeSandbox: Open React CodeSandbox

---

🌟 Highlights

• Zero External Dependencies: No D3, Leaflet, Mapbox, or Google Maps API keys required.
• Deep Granularity (5 Geographical Levels):
  1. India (Country) → 36 States & Union Territories
  2. State → 791 Districts
  3. District → 6,000+ Mandals + Major Cities
  4. Mandal → 4,100+ Local Areas
• Choropleth Data Mapping: Easily map region values to smooth color gradients (Ocean, Ember, Mono, Sky, Heat, Forest).
• Trend Badges: Render percentage change badges (▲ / ▼) on regions and tooltips.
• Lazy Loading Support: Includes LazyIndiaMap wrapped in React.lazy() and Suspense for asynchronous code-splitting.
• Full TypeScript Support: Ships with complete type declarations (.d.ts).

---

📦 Installation

npm install react-india-drilldown-map
# or
yarn add react-india-drilldown-map
# or
pnpm add react-india-drilldown-map

---

🚀 Quick Start

Standard Usage

import React from 'react';
import { IndiaMap } from 'react-india-drilldown-map';

function App() {
  return (
    <IndiaMap
      values={{ "Maharashtra": 450, "Karnataka": 380, "Delhi": 290 }}
      trends={{ "Maharashtra": 12.5, "Karnataka": -4.2 }}
      legendLabel="Active Users"
      defaultTheme="dark"
      defaultScale="Ocean"
      onSelect={(name, level) => {
        console.log(`Clicked on ${level}: ${name}`);
      }}
    />
  );
}

export default App;

Lazy Loaded Usage (Recommended for Fast Initial Page Loads)

import React from 'react';
import { LazyIndiaMap } from 'react-india-drilldown-map';

function Dashboard() {
  return (
    <LazyIndiaMap
      values={(name, level) => Math.floor(Math.random() * 100)}
      legendLabel="Metrics"
      fallback={<div>Loading India Map Data...</div>}
    />
  );
}

export default Dashboard;

---

⚙️ Props API

Prop	Type	Default	Description
values	Record<string, number> | ((name: string, level: DrillLevel) => number)	{}	Key-value mapping of region names to numeric values, or a dynamic resolver function.
trends	Record<string, number> | ((name: string, level: DrillLevel) => number)	{}	Key-value mapping of region names to percentage changes (+12.4 / -3.1), or a dynamic resolver function.
defaultTheme	'dark' | 'light'	'dark'	Initial color theme mode.
defaultScale	ScaleName	null	Color palette preset ('Ocean', 'Ember', 'Mono', 'Sky', 'Heat', 'Forest').
defaultSettings	DisplaySettings	{ showValues: true, ... }	Display toggles (showValues, showCounts, showTrends, showNames).
onSelect	(name: string, level: DrillLevel) => void	undefined	Callback triggered when a region, city, or area is clicked.
height	number | string	600	Height of the map container in pixels.
legendLabel	string	'Value'	Text label for the bottom color scale legend.

---

📐 Types

type DrillLevel = 'india' | 'state' | 'district' | 'mandal' | 'city' | 'area';
type ThemeMode = 'dark' | 'light';
type ScaleName = 'Ocean' | 'Ember' | 'Mono' | 'Sky' | 'Heat' | 'Forest';

interface DisplaySettings {
  showValues?: boolean;
  showCounts?: boolean;
  showTrends?: boolean;
  showNames?: boolean;
}

---

📄 License

MIT © 2026