Noa-iran-map-react NPM

Noa Iran Map React

Features

Dynamic Province Coloring: Change the color intensity of provinces using their codes and provided values.
TypeScript Support: Enjoy type safety and seamless integration in TypeScript projects.
Next.js Ready: Fully compatible with React and Next.js environments.
Interactive: Easy-to-use props for dynamic updates and event handling.

Installation

   npm install noa-iran-map-react

Usage

"use cleint"
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 (
        <div style={{height:"200px"}}>
            <IranMap data={data}  />
        </div>
    );
}

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.