Noa Iran Map React

About

Noa Iran Map React is a highly customizable and interactive map of Iran, designed to seamlessly integrate with React and Next.js applications. With robust TypeScript support and dynamic province highlighting, it’s perfect for creating interactive dashboards or visually rich data applications.

Features

• Dynamic Province Coloring: Highlight provinces using their codes and corresponding data values.
• TypeScript Ready: Fully compatible with TypeScript for enhanced type safety and code clarity.
• Next.js Friendly: Optimized for server-side rendering and fast performance in React environments.
• Interactive: Enable dynamic updates and interactive events with intuitive props.

Installation

npm install noa-iran-map-react

Usage Example

import React from 'react';
import IranMap from 'noa-iran-map-react';

export default function Home() {
    const data = {
        "IR-32": 100, // استان البرز
        "IR-15": 200, // استان کرمان
        "IR-04": 250, // استان کرمان
    };

    return (
        <IranMap data={data} />
    );
}
        

Props

Prop Name	Type	Default	Description
color	string	#FF5733	The fill color for provinces that have data.
backgroundColor	string	#E0E0E0	The default color for provinces without specific data.
tooltipLabel	(code: string) => string	undefined	Function to define the tooltip label when hovering provinces.
data	Record<string, number>	{}	An object containing province codes as keys and values as data.

Province Codes

Below are some example province codes for use with the data prop:

Province Name	Code
Alborz	IR-32
Kerman	IR-15
Fars	IR-04

Download Full Province Codes JSON