🇮🇳 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