setZones()

This hook updates the list of zones currently being rendered.

---

Example

import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";
import exampleZones from "./exampleZones.json";

const ExamplePage = () => {
  const palitoRef = useRef(null);
  const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  const handleInjectData = () => {
    if (palitoRef.current) {
      palitoRef.current.setZones(exampleZones);
    }
  };

  return (
    <div>
      <div>
        <Palito
          ref={palitoRef}
          licenseKey={LICENSE_KEY}
        />
      </div>
      {/* Add a button to test the API call */}
      <div style={{ position: 'absolute', bottom: '40px', right: '20px', zIndex: 1000 }}>
        <button onClick={handleInjectData} style={{ padding: '10px 20px', fontSize: '16px' }}>
          Set Zones
        </button>
      </div>
    </div>
  );
};

export default ExamplePage;

exampleZone.json

[
    {
        "id": "zone-1",
        "name": "Zone 1",
        "nodes": [
        {
            "id": "1",
            "type": "custom",
            "position": {
            "x": -184.5,
            "y": -59
            },
            "data": {
            "component_name": "Firewall",
            "type": "Firewall",
            "security_zone": "zone-1",
            "system_category": "Network",
            "other_system_connection": []
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {}
        },
        {
            "id": "2",
            "type": "custom",
            "position": {
            "x": -257.5,
            "y": 63
            },
            "data": {
            "component_name": "Router",
            "type": "Router",
            "security_zone": "zone-1",
            "system_category": "Network",
            "other_system_connection": [
                {
                "id": "1",
                "type": "Default"
                }
            ]
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {}
        },
        {
            "id": "3",
            "type": "custom",
            "position": {
            "x": -138.5,
            "y": 82
            },
            "data": {
            "component_name": "Router",
            "type": "Router",
            "security_zone": "zone-1",
            "system_category": "Network",
            "other_system_connection": [
                {
                "id": "1",
                "type": "Default"
                }
            ]
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {}
        }
        ],
        "viewport": {
        "x": 653.5,
        "y": 523,
        "zoom": 1
        }
    },
    {
        "id": "zone-2",
        "name": "Zone 2",
        "nodes": [
        {
            "id": "4",
            "type": "custom",
            "position": {
            "x": -197.5,
            "y": -155
            },
            "data": {
            "component_name": "Firewall",
            "type": "Firewall",
            "security_zone": "zone-2",
            "system_category": "Network",
            "other_system_connection": []
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {},
            "selected": false
        },
        {
            "id": "5",
            "type": "custom",
            "position": {
            "x": -191.5,
            "y": -61
            },
            "data": {
            "component_name": "Desktop",
            "type": "Desktop",
            "security_zone": "zone-2",
            "system_category": "Other",
            "other_system_connection": [
                {
                "id": "4",
                "type": "Default"
                }
            ]
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {},
            "selected": false
        },
        {
            "id": "6",
            "type": "custom",
            "position": {
            "x": -180.5,
            "y": 77
            },
            "data": {
            "component_name": "Panel",
            "type": "Panel",
            "security_zone": "zone-2",
            "system_category": "Other",
            "other_system_connection": [
                {
                "id": "5",
                "type": "Default"
                }
            ]
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {},
            "selected": false
        },
        {
            "id": "7",
            "type": "custom",
            "position": {
            "x": -90.5,
            "y": 78
            },
            "data": {
            "component_name": "Panel",
            "type": "Panel",
            "security_zone": "zone-2",
            "system_category": "Other",
            "other_system_connection": [
                {
                "id": "5",
                "type": "Default"
                }
            ]
            },
            "measured": {
            "width": 80,
            "height": 100
            },
            "style": {},
            "selected": false,
            "dragging": false
        }
        ],
        "viewport": {
        "x": 0,
        "y": 0,
        "zoom": 1
        },
        "security_zone": "zone-1"
    }
]

Props

Name	Type	Description	Default
zones	Zone[]	List of zones to be displayed	-

Return

This hook does not return any value.