React Iran Heatmap

React Iran Heatmap is a customizable Iran provinces heatmap for React and Next.js applications.

It provides a simple way to visualize province-level data across all 31 provinces of Iran, with automatic color intensity based on numeric values.

Built with TypeScript and designed to be easy to install and integrate into React applications.

Features

• Iran provinces map for React
• Iran heatmap for React and Next.js
• All 31 provinces of Iran
• Data-driven province coloring
• Automatic color intensity based on values
• Custom heatmap color
• Custom background color
• Dynamic updates through props
• TypeScript support
• Next.js support
• Simple npm installation
• Lightweight and easy to integrate

Installation

npm install react-iran-heatmap

Or:

yarn add react-iran-heatmap

pnpm add react-iran-heatmap

Basic Usage

"use client";

import { IranHeatMap } from "react-iran-heatmap";

export default function Home() {
    const data = {
        "IR-16": 20,
        "IR-15": 42,
        "IR-25": 30,
    };

    return (
        <div style={{ height: "300px" }}>
            <IranHeatMap data={data} />
        </div>
    );
}

The object keys represent Iranian province codes and the values represent your data.

For example:

const data = {
    "IR-07": 100,
    "IR-19": 42,
    "IR-28": 30,
    "IR-12": 70,
};

When the data prop changes, the heatmap automatically updates.

Heatmap Colors

The heatmap automatically calculates color intensity based on the minimum and maximum values in data.

The province with the highest value receives the full color.

Lower values receive progressively lighter colors.

Provinces without data use backgroundColor.

<IranHeatMap
    data={{
        "IR-07": 100,
        "IR-15": 50,
        "IR-25": 20,
    }}
    color="#39D98A"
    backgroundColor="#E0E0E0"
/>

Custom Colors

Use the color prop to customize the heatmap color.

<IranHeatMap
    color="#39D98A"
    data={{
        "IR-07": 100,
        "IR-15": 50,
        "IR-25": 80,
    }}
/>

Use backgroundColor to customize provinces that don't have data.

<IranHeatMap
    color="#39D98A"
    backgroundColor="#E0E0E0"
    data={{
        "IR-07": 100,
        "IR-15": 50,
        "IR-25": 80,
    }}
/>

Props

| Prop | Type | Default | Description | |---|---|---|---| | data | Record<string, number> | {} | Province codes mapped to numeric values. | | color | string | #FF5733 | Main color used for provinces with data. | | backgroundColor | string | #E0E0E0 | Color used for provinces without data. |

Iran Province Codes

react-iran-heatmap includes all 31 provinces of Iran.

Each province is identified using its ISO 3166-2 code.

| Province | Code | |---|---| | Alborz | IR-32 | | Kerman | IR-15 | | Sistan and Baluchestan | IR-13 | | North Khorasan | IR-31 | | Razavi Khorasan | IR-30 | | South Khorasan | IR-29 | | Kordestan | IR-16 | | Gilan | IR-19 | | Kermanshah | IR-17 | | East Azarbaijan | IR-01 | | West Azarbaijan | IR-02 | | Qazvin | IR-28 | | Zanjan | IR-11 | | Hamadan | IR-24 | | Qom | IR-26 | | Markazi | IR-22 | | Ardebil | IR-03 | | Hormozgan | IR-23 | | Ilam | IR-05 | | Lorestan | IR-20 | | Khuzestan | IR-10 | | Chahar Mahall and Bakhtiari | IR-08 | | Yazd | IR-25 | | Tehran | IR-07 | | Semnan | IR-12 | | Mazandaran | IR-21 | | Golestan | IR-27 | | Fars | IR-14 | | Esfahan | IR-04 | | Bushehr | IR-06 | | Kohgiluyeh and Buyer Ahmad | IR-18 |

Dynamic Data

The heatmap updates automatically when the data prop changes.

This makes it suitable for dashboards and applications that receive province-level data from an API.

"use client";

import { useState } from "react";
import { IranHeatMap } from "react-iran-heatmap";

export default function Dashboard() {
    const [data, setData] = useState({
        "IR-07": 100,
        "IR-15": 50,
        "IR-25": 80,
    });

    const updateData = () => {
        setData({
            "IR-07": 120,
            "IR-15": 75,
            "IR-25": 95,
        });
    };

    return (
        <div style={{ height: "300px" }}>
            <IranHeatMap data={data} />
        </div>
    );
}

Next.js

react-iran-heatmap works with Next.js and the App Router.

Because the component is used on the client side, add "use client" to the component that renders the heatmap.

"use client";

import { IranHeatMap } from "react-iran-heatmap";

export default function Page() {
    return (
        <div style={{ height: "300px" }}>
            <IranHeatMap
                data={{
                    "IR-07": 100,
                    "IR-25": 80,
                    "IR-15": 60,
                }}
            />
        </div>
    );
}

TypeScript

The package is written in TypeScript and includes type definitions out of the box.

import { IranHeatMap } from "react-iran-heatmap";

const data: Record<string, number> = {
    "IR-07": 100,
    "IR-15": 50,
    "IR-25": 80,
};

export default function Map() {
    return <IranHeatMap data={data} />;
}

Use Cases

• Iran province data visualization
• Regional statistics
• Population visualization
• User distribution
• Sales and revenue analytics
• Business dashboards
• Geographic analytics
• Regional monitoring
• API-based data visualization
• Iran geographic data visualization

Requirements

• React 18+
• React DOM 18+
• Next.js is optional
• TypeScript is optional

License

MIT License.

Contributing

Issues, feature requests, and pull requests are welcome.

If you find react-iran-heatmap useful, consider giving the project a star on GitHub.