{"_id":"@aryanjsx/indiamap","_rev":"3-021b2d77be4e2875aa653d1b3b4a6db2","name":"@aryanjsx/indiamap","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aryanjsx/indiamap","version":"1.0.0","keywords":["india","svgmap","indiamap","svgmap-india","react","map component","interactive map","india states"],"author":{"name":"Aryan"},"license":"ISC","_id":"@aryanjsx/indiamap@1.0.0","maintainers":[{"name":"aryanjsx","email":"kumararyan1929@gmail.com"}],"homepage":"https://github.com/aryanjsx/IndiaMap#readme","bugs":{"url":"https://github.com/aryanjsx/IndiaMap/issues"},"dist":{"shasum":"cc57a8eeca5d53a8de29be20be21d9454770b4c9","tarball":"https://registry.npmjs.org/@aryanjsx/indiamap/-/indiamap-1.0.0.tgz","fileCount":9,"integrity":"sha512-1v4Ta7X15CogSBt8+2RgOnb9xXbq+5P0FAkAoyLX2+YOlgyTS2ezRp1AYI6HD1MlyzJZeNVjC8OtK1f3ZXIE7w==","signatures":[{"sig":"MEYCIQCmri3Wq+I+5yw/oeeaKZcak3qmdS5sRJ9m0bSTBTvGhQIhAPV1nbAVYJd11ea8AYBRdU7NEv4EvUB/n1tKO2t6eBnS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":212047},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"40a14bf4d798b0e6e7e8ca09ed78ee37414c39c7","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aryanjsx","email":"kumararyan1929@gmail.com"},"repository":{"url":"git+https://github.com/aryanjsx/IndiaMap.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive SVG Map of India with hover and click functionality","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.31.0","typescript":"^5.7.3","@types/react":"^19.0.8","@babel/preset-react":"^7.25.9","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^16.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/indiamap_1.0.0_1770317016095_0.3391714554254839","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aryanjsx/indiamap","version":"1.0.1","keywords":["india","svgmap","indiamap","svgmap-india","react","map component","interactive map","india states"],"author":{"name":"Aryan"},"license":"ISC","_id":"@aryanjsx/indiamap@1.0.1","maintainers":[{"name":"aryanjsx","email":"kumararyan1929@gmail.com"}],"homepage":"https://github.com/aryanjsx/IndiaMap#readme","bugs":{"url":"https://github.com/aryanjsx/IndiaMap/issues"},"dist":{"shasum":"b0eefadcb4eb7b20b930004023c5241edf0920f5","tarball":"https://registry.npmjs.org/@aryanjsx/indiamap/-/indiamap-1.0.1.tgz","fileCount":9,"integrity":"sha512-FBHanMQgbNJxROE3sPGeEROGO/+WiPcc+pp2IKgENZZJYFnOKi4zterQhODru5PMzL4diVBeuVG+KL/py6HDJg==","signatures":[{"sig":"MEYCIQCXm4oy6tnBYBOGTxgJFA0mmadLxCDlXZ7nRgOTvLgYbwIhALFSCMUWXHtAbo+1ik9rovuBauCKZAxIO9Lqh0c9xrZR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":212077},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"40a14bf4d798b0e6e7e8ca09ed78ee37414c39c7","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aryanjsx","email":"kumararyan1929@gmail.com"},"repository":{"url":"git+https://github.com/aryanjsx/IndiaMap.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive SVG Map of India with hover and click functionality","directories":{},"sideEffects":false,"_nodeVersion":"24.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.8.1","rollup":"^4.31.0","typescript":"^5.7.3","@types/react":"^19.0.8","@babel/preset-react":"^7.25.9","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-typescript2":"^0.36.0","@rollup/plugin-node-resolve":"^16.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/indiamap_1.0.1_1770317850128_0.16116850331320576","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aryanjsx/indiamap","version":"1.0.2","description":"Interactive SVG Map of India with hover and click functionality","type":"module","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"sideEffects":false,"scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/aryanjsx/IndiaMap.git"},"keywords":["india","svgmap","indiamap","svgmap-india","react","map component","interactive map","india states"],"author":{"name":"Aryan"},"license":"ISC","bugs":{"url":"https://github.com/aryanjsx/IndiaMap/issues"},"homepage":"https://github.com/aryanjsx/IndiaMap#readme","peerDependencies":{"react":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0","react-dom":"^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"devDependencies":{"@babel/preset-react":"^7.25.9","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-terser":"^0.4.4","@types/react":"^19.0.8","rollup":"^4.31.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-typescript2":"^0.36.0","tslib":"^2.8.1","typescript":"^5.7.3"},"gitHead":"918a84c0b907063dd4529afd5e5e3cd14774b1d6","_id":"@aryanjsx/indiamap@1.0.2","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-+zdRkOB7KSnHGfAU8Kuds7Q347HSFOmcsanzE46vs/gH7KiruwceLNZxabEQ2RaiVG/UILDBkdq44jWho/S41g==","shasum":"e2abfbb478497385504e93c4bd97e0a937133d0a","tarball":"https://registry.npmjs.org/@aryanjsx/indiamap/-/indiamap-1.0.2.tgz","fileCount":9,"unpackedSize":215735,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBZc2A5AYUnaSQ6v+NJ2YY3r5hewU4pX3lWgU4MF/gFfAiEA7aVNs8kZkrvg0aPfM1cTiHWmSsPb8graBoeRWK2VA9o="}]},"_npmUser":{"name":"aryanjsx","email":"kumararyan1929@gmail.com"},"directories":{},"maintainers":[{"name":"aryanjsx","email":"kumararyan1929@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/indiamap_1.0.2_1770321156296_0.27173955379226555"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-05T18:43:35.997Z","modified":"2026-02-05T19:52:36.548Z","1.0.0":"2026-02-05T18:43:36.229Z","1.0.1":"2026-02-05T18:57:30.271Z","1.0.2":"2026-02-05T19:52:36.443Z"},"bugs":{"url":"https://github.com/aryanjsx/IndiaMap/issues"},"author":{"name":"Aryan"},"license":"ISC","homepage":"https://github.com/aryanjsx/IndiaMap#readme","keywords":["india","svgmap","indiamap","svgmap-india","react","map component","interactive map","india states"],"repository":{"type":"git","url":"git+https://github.com/aryanjsx/IndiaMap.git"},"description":"Interactive SVG Map of India with hover and click functionality","maintainers":[{"name":"aryanjsx","email":"kumararyan1929@gmail.com"}],"readme":"
\n\n# 🇮🇳 @aryanjsx/indiamap\n\n**An elegant, interactive SVG map of India for React applications**\n\n[![npm version](https://img.shields.io/npm/v/@aryanjsx/indiamap.svg?style=flat-square&color=ff9933)](https://www.npmjs.com/package/@aryanjsx/indiamap)\n[![npm downloads](https://img.shields.io/npm/dm/@aryanjsx/indiamap.svg?style=flat-square&color=138808)](https://www.npmjs.com/package/@aryanjsx/indiamap)\n[![license](https://img.shields.io/npm/l/@aryanjsx/indiamap.svg?style=flat-square&color=000080)](https://github.com/aryanjsx/IndiaMap/blob/main/LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/React-16%20%7C%2017%20%7C%2018%20%7C%2019-61dafb?style=flat-square&logo=react&logoColor=white)](https://reactjs.org/)\n\n
\n\n![India Map Demo](./svgmap.gif)\n\n
\n\n[Installation](#-installation) • [Usage](#-usage) • [Props](#-props) • [State Codes](#-state-codes) • [Examples](#-examples) • [Contributing](#-contributing)\n\n
\n\n---\n\n## ✨ Features\n\n- 🗺️ **Complete Coverage** — All 28 states and 8 union territories of India\n- 🎨 **Fully Customizable** — Colors, sizes, and styles to match your design\n- 🖱️ **Interactive** — Smooth hover effects and click handling\n- ⌨️ **Accessible** — Full keyboard navigation and ARIA support\n- 📦 **Lightweight** — Zero external dependencies\n- 🔷 **TypeScript** — Complete type definitions included\n- ⚡ **Performant** — Optimized with React hooks and memoization\n\n---\n\n## 📦 Installation\n\n```bash\n# npm\nnpm install @aryanjsx/indiamap\n\n# yarn\nyarn add @aryanjsx/indiamap\n\n# pnpm\npnpm add @aryanjsx/indiamap\n```\n\n---\n\n## 🚀 Usage\n\n### Basic Example\n\n```jsx\nimport { useState } from 'react'\nimport IndiaMap from '@aryanjsx/indiamap'\n\nfunction App() {\n const [selectedState, setSelectedState] = useState('')\n\n return (\n
\n

Selected: {selectedState || 'Click a state'}

\n setSelectedState(stateCode)}\n size=\"500px\"\n mapColor=\"#ffffff\"\n strokeColor=\"#4a4a4a\"\n strokeWidth=\"0.5\"\n hoverColor=\"#ff9933\"\n />\n
\n )\n}\n```\n\n### Next.js / App Router\n\n```jsx\n'use client'\n\nimport { useState } from 'react'\nimport IndiaMap from '@aryanjsx/indiamap'\n\nexport default function MapPage() {\n const [state, setState] = useState('')\n\n return (\n \n )\n}\n```\n\n### With TypeScript\n\n```tsx\nimport { useState } from 'react'\nimport IndiaMap from '@aryanjsx/indiamap'\n\nconst MapComponent: React.FC = () => {\n const [selectedState, setSelectedState] = useState('')\n\n const handleStateClick = (stateCode: string): void => {\n setSelectedState(stateCode)\n console.log(`Selected: ${stateCode}`)\n }\n\n return (\n \n )\n}\n\nexport default MapComponent\n```\n\n---\n\n## 📋 Props\n\n| Prop | Type | Required | Default | Description |\n|:-----|:-----|:--------:|:--------|:------------|\n| `onClick` | `(stateCode: string) => void` | ✅ | — | Callback fired when a state is clicked |\n| `className` | `string` | ❌ | `\"svgmap\"` | CSS class for the container |\n| `size` | `string` | ❌ | `\"inherit\"` | Width of the map (e.g., `\"500px\"`, `\"100%\"`) |\n| `mapColor` | `string` | ❌ | `\"#ffffff\"` | Default fill color for states |\n| `strokeColor` | `string` | ❌ | `\"#000000\"` | Border color for states |\n| `strokeWidth` | `string` | ❌ | `\"0.5\"` | Border width for states |\n| `hoverColor` | `string` | ❌ | `\"#303030\"` | Fill color on hover/focus |\n\n---\n\n## 🗺️ State Codes\n\nThe map uses ISO-style 2-letter codes for each state and union territory:\n\n
\n📍 States (28)\n\n| Code | State |\n|:----:|:------|\n| `AP` | Andhra Pradesh |\n| `AR` | Arunachal Pradesh |\n| `AS` | Assam |\n| `BR` | Bihar |\n| `CT` | Chhattisgarh |\n| `GA` | Goa |\n| `GJ` | Gujarat |\n| `HR` | Haryana |\n| `HP` | Himachal Pradesh |\n| `JH` | Jharkhand |\n| `KA` | Karnataka |\n| `KL` | Kerala |\n| `MP` | Madhya Pradesh |\n| `MH` | Maharashtra |\n| `MN` | Manipur |\n| `ML` | Meghalaya |\n| `MZ` | Mizoram |\n| `NL` | Nagaland |\n| `OR` | Odisha |\n| `PB` | Punjab |\n| `RJ` | Rajasthan |\n| `SK` | Sikkim |\n| `TN` | Tamil Nadu |\n| `TG` | Telangana |\n| `TR` | Tripura |\n| `UP` | Uttar Pradesh |\n| `UT` | Uttarakhand |\n| `WB` | West Bengal |\n\n
\n\n
\n🏛️ Union Territories (8)\n\n| Code | Union Territory |\n|:----:|:----------------|\n| `AN` | Andaman and Nicobar Islands |\n| `CH` | Chandigarh |\n| `DD` | Dadra and Nagar Haveli and Daman and Diu |\n| `DL` | Delhi |\n| `JK` | Jammu and Kashmir |\n| `LA` | Ladakh |\n| `LD` | Lakshadweep |\n| `PY` | Puducherry |\n\n
\n\n### Quick Reference\n\n```javascript\nconst stateNames = {\n 'AN': 'Andaman and Nicobar Islands',\n 'AP': 'Andhra Pradesh',\n 'AR': 'Arunachal Pradesh',\n 'AS': 'Assam',\n 'BR': 'Bihar',\n 'CH': 'Chandigarh',\n 'CT': 'Chhattisgarh',\n 'DD': 'Dadra and Nagar Haveli and Daman and Diu',\n 'DL': 'Delhi',\n 'GA': 'Goa',\n 'GJ': 'Gujarat',\n 'HP': 'Himachal Pradesh',\n 'HR': 'Haryana',\n 'JH': 'Jharkhand',\n 'JK': 'Jammu and Kashmir',\n 'KA': 'Karnataka',\n 'KL': 'Kerala',\n 'LA': 'Ladakh',\n 'LD': 'Lakshadweep',\n 'MH': 'Maharashtra',\n 'ML': 'Meghalaya',\n 'MN': 'Manipur',\n 'MP': 'Madhya Pradesh',\n 'MZ': 'Mizoram',\n 'NL': 'Nagaland',\n 'OR': 'Odisha',\n 'PB': 'Punjab',\n 'PY': 'Puducherry',\n 'RJ': 'Rajasthan',\n 'SK': 'Sikkim',\n 'TG': 'Telangana',\n 'TN': 'Tamil Nadu',\n 'TR': 'Tripura',\n 'UP': 'Uttar Pradesh',\n 'UT': 'Uttarakhand',\n 'WB': 'West Bengal'\n}\n```\n\n---\n\n## 🎨 Examples\n\n### Dark Theme\n\n```jsx\n\n```\n\n### Tricolor Theme (Indian Flag Colors)\n\n```jsx\n\n```\n\n### Minimal Light\n\n```jsx\n\n```\n\n### Navigation Example\n\n```jsx\nimport { useNavigate } from 'react-router-dom'\nimport IndiaMap from '@aryanjsx/indiamap'\n\nfunction ExploreMap() {\n const navigate = useNavigate()\n\n const handleStateClick = (stateCode) => {\n navigate(`/state/${stateCode.toLowerCase()}`)\n }\n\n return (\n \n )\n}\n```\n\n---\n\n## ♿ Accessibility\n\nThis component is built with accessibility in mind:\n\n- **Keyboard Navigation** — Tab through states, press Enter or Space to select\n- **ARIA Labels** — Screen reader support with descriptive labels\n- **Focus Indicators** — Visual focus states that mirror hover styles\n- **Semantic SVG** — Proper `role` and `aria-label` attributes\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\n[ISC](./LICENSE) © [Aryan](https://github.com/aryanjsx)\n\n---\n\n## 🙏 Credits\n\n- SVG map reference from [MAPSVG](https://mapsvg.com/maps/india)\n\n---\n\n
\n\n**[⬆ Back to Top](#-aryanjsxindiamap)**\n\nMade with ❤️ in India\n\n
\n","readmeFilename":"README.md"}