svgmap-tamilnadu/README.md

Interactive map of Tamilnadu for React

# Interactive Map of Tamilnadu

This package generates an interactive SVG map of Tamilnadu. It allows users to highlight districts on hover and retrieve the value of the selected district.

![Preview](https://raw.githubusercontent.com/arav-ind/svgmaps-india/refs/heads/master/gifs/tamilnadu.gif)

## Installation

Install the package via npm:

```bash
pnpm install svgmap-tamilnadu
```

## District List

The following are the districts mapped with its ID.

```js
export const districtNames = {
    ARI: 'Ariyalur',
    CHE: 'Chennai',
    CHN: 'Chengalpattu',
    CBE: 'Coimbatore',
    CUD: 'Cuddalore',
    DHAM: 'Dharmapuri',
    DIN: 'Dindigul',
    ERO: 'Erode',
    KAN: 'Kanchipuram',
    KAL: 'Kallakurichi',
    KKN: 'Kanyakumari',
    KKL: 'Karaikal',
    KAR: 'Karur',
    KRI: 'Krishnagiri',
    MAD: 'Madurai',
    MAY: 'Mayiladuthurai',
    NAG: 'Nagapattinam',
    NAM: 'Namakkal',
    NIL: 'Nilgiris',
    PER: 'Perambalur',
    PUD: 'Pudukkottai',
    RAM: 'Ramanathapuram',
    RAN: 'Ranipet',
    SAL: 'Salem',
    SIV: 'Sivagangai',
    TEN: 'Tenkasi',
    TAN: 'Tanjavur',
    THE: 'Theni',
    THI: 'Thiruvarur',
    TPR: 'Tiruppur',
    THO: 'Thoothukudi',
    TRI: 'Tiruchirappalli',
    TNE: 'Tirunelveli',
    TIR: 'Tirupattur',
    TVL: 'Tiruvallur',
    TVM: 'Tiruvannamalai',
    VEL: 'Vellore',
    VIL: 'Viluppuram',
    VIR: 'Virudhunagar',
}
```

## Usage

```jsx

'use client'

import React, { useState } from 'react'
import TamilnaduMap, { districtNames } from 'svgmap-tamilnadu'

const App = () => {
    const [selectedValue, setSelectedValue] = useState<string | null>(null)

    return (
        <div>
            <h3 style={{ position: 'absolute' }}>
                {
                    selectedValue ? `${selectedValue}: ${districtNames[selectedValue]}` : 'None'
                }
            </h3>
            <TamilnaduMap
                onClick={(value: string) => setSelectedValue(value)}
                size="600px"
                mapColor="white"
                strokeColor="black"
                strokeWidth="1"
                hoverColor="rgb(80 80 80)"
            />
        </div>
    )
}

export default App

```

## Props Available

| Props       | Description                                        | Requirement | Default Value |
| ----------- | -------------------------------------------------- | ----------- | ------------- |
| onClick     | Callback function to get the selected state value. | Required    | NA            |
| className   | Custom classname for the map component.            | Optional    | "svgmap"      |
| size        | Width of the map.                                  | Optional    | "inherit"     |
| mapColor    | Color of the map.                                  | Optional    | "#ffffff"     |
| strokeColor | Border color of each state.                        | Optional    | "#000000"     |
| strokeWidth | Border width of each state.                        | Optional    | "0.5"         |
| hoverColor  | Color of the state while hovering on it.           | Optional    | "#303030"     |

## Contributing

Pull requests are welcome.