React TreeMap

!TreeMap Example

React TreeMap is a highly customizable and interactive TreeMap component for React applications. It allows you to visualize hierarchical data in a nested rectangle format, where each rectangle represents a node in the tree structure. Perfect for data visualization, dashboards, and analytics applications.

---

Features

- Interactive TreeMap: Supports left-click, right-click, and hover interactions.
- Customizable Colors: Define colors for each node using hex codes.
- Tooltips: Display custom HTML tooltips on hover.
- Responsive Design: Automatically adjusts to the container size.
- Lightweight: Minimal dependencies and easy to integrate.
- TypeScript Support: Includes TypeScript definitions for better developer experience.

---

Installation

Install the package via npm or yarn:

``bash
npm install react-treemap
`

or

`bash
yarn add react-treemap
`

---

Usage

$3

Here’s a simple example to get you started:

`jsx
import React from "react";
import TreeMap from "react-treemap";

function App() {
const treeData = {
children: [
{
children: [],
data: {
$area: 10,
$color: 1,
$hex: "#000000",
},
id: "a",
name: "name-1",
tooltip: '

export default App;
`

---

Props

| Prop Name | Type | Description |
| ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
| treeData | Object | The hierarchical data to be visualized. Each node should have children, data, id, name, and tooltip properties. |

---

API Documentation

$3

The TreeMap component accepts the following props:

#### treeData (Required)

- Type: Object
- Description: The hierarchical data to be visualized. Each node should have:
- children: Array of child nodes.
- data: Object containing $area, $color, and $hex properties.
- id: Unique identifier for the node.
- name: Display name for the node.
- tooltip`: HTML string to display as a tooltip on hover.

---

Acknowledgments

- Built with ❤️ by MirMohammad Musavi.

---