# react-india-states-map

> Datamaps for indian States

Latest version **1.0.0** (published 2021-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-india-states-map
pnpm add react-india-states-map
yarn add react-india-states-map
bun add react-india-states-map
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-06-29 |
| First published | 2021-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 740.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | vinocrzy |
| Maintainers | vinocrazy |

## Links

- npm: https://www.npmjs.com/package/react-india-states-map
- Repository: https://github.com/vinocrzy/react-india-states-map
- Homepage: https://github.com/vinocrzy/react-india-states-map#readme
- Issues: https://github.com/vinocrzy/react-india-states-map/issues
- npm.io page: https://npm.io/package/react-india-states-map

## Dependencies (4)

- [d3-geo](https://npm.io/package/d3-geo.md) ^1.11.9
- [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.1
- [d3-interpolate](https://npm.io/package/d3-interpolate.md) ^1.4.0
- [topojson-client](https://npm.io/package/topojson-client.md) ^3.1.0

## Recent versions

- 1.0.0 (latest) — 2021-06-29

## README

# react-india-states-map

> Datamaps for indian States

## Usage

```tsx
import React, { useState } from "react";

import ReactDatamaps from "react-india-states-map";

const STATES = {
  Maharashtra: {
    value: 50,
    content: {
      txt: "Lorem ipsum dolor sit amet consectetur adipisicing elit. A quisquam quae laboriosam sed magni aliquam dolore sequi libero harum, hic nihil. Omnis eos deserunt molestiae harum, cum nemo et temporibus?",
    },
  },
};

const Example = () => {
  const [activeState, setactiveState] = useState({
    data: STATES.Maharashtra,
    name: "India",
  });

  const [stateLists, setStateLists] = useState(STATES);

  const stateOnClick = (data, name) => {
    setactiveState({ data, name });
  };

  return (
    <ReactDatamaps
      regionData={stateLists}
      mapLayout={{
        hoverTitle: "Count",
        noDataColor: "#D36418",
        borderColor: "#ffffff",
        hoverBorderColor: "pink",
        hoverColor: "green",
      }}
      hoverComponent={({ value }) => {
        return (
          <>
            <p>{value.name}</p>
          </>
        );
      }}
      onClick={stateOnClick}
      activeState={activeState}
    />
  );
};
```

#### Object of map layout props

```
hoverTitle: 'Count',
noDataColor: '#f5f5f5',
borderColor: '#8D8D8D',
hoverColor: 'green'
hoverBorderColor: 'green'
```

### Valid States

```
Andaman & Nicobar Island
Andhra Pradesh
Arunanchal Pradesh
Assam
Bihar
Chandigarh
Chhattisgarh
Dadara & Nagar Haveli
Daman & Diu
Delhi
Goa
Gujarat
Haryana
Himachal Pradesh
Jammu & Kashmir
Jharkhand
Karnataka
Kerala
Lakshadweep
Madhya Pradesh
Maharashtra
Manipur
Meghalaya
Mizoram
Nagaland
Odisha
Puducherry
Punjab
Rajasthan
Sikkim
Tamil Nadu
Telangana
Tripura
Uttar Pradesh
Uttarakhand
West Bengal
```

## License

MIT © [vinocrzy](https://github.com/vinocrzy)

---
_Source: https://npm.io/package/react-india-states-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._