@arcgis/map-components-react

ArcGIS Maps SDK for JavaScript - React wrapper for Map Components

Note: @arcgis/map-components-react was developed for use in React 18. Consider updating to React 19 where the React wrapper is no longer necessary. Check out the documentation to get started with @arcgis/map-components in React 19.

The ArcGIS Maps SDK for JavaScript provides a suite of ready-to-use UI components that simplify the process of creating GIS web applications. This package contains a map component, scene component, and many other components with functionality made possible through the SDK's core API which is also accessible through the components.

Documentation

• Key Features
• Build with React
• API and component references
• Functionality samples

Resources

• ArcGIS blog
• twitter@EsriDevs
• System Requirements
• Terms of Use
• Licensing
• Working with next versions

Support

• General questions about using this package or the ArcGIS Maps SDK for JavaScript? See the Esri developer community.
• Technical support.

Quick start guide

• Get started by using the react 18 sample.
• Install the required packages: @arcgis/map-components-react, @arcgis/core, @esri/calcite-components-react.
• Import the necessary CSS files in your project and ensure CSS is configured for the map components:

@import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/dark/main.css';
@import url("https://js.arcgis.com/calcite-components/2.3.2/calcite.css");

#root,
html,
body {
  margin: 0;
}

arcgis-map {
  display: block;
  height: 100vh;
}

• Add map component: In your main file (e.g., index.tsx), add the ArcgisMap component and configure it with an optional item-id if using a WebMap from ArcGIS Online or an ArcGIS Enterprise portal:

import React from "react";
import ReactDOM from "react-dom/client";
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-zoom";
import { ArcgisMap, ArcgisZoom } from "@arcgis/map-components-react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ArcgisMap itemId="your-webmap-item-id"></ArcgisMap>
  </React.StrictMode>,
);

• Add additional functionality: To your map, you could set properties and use events like onArcgisViewReadyChange to detect when the map view is ready, and implement custom JavaScript logic using the core API. For example, you can add the ArcgisZoom component and listen for view changes:

root.render(
  <React.StrictMode>
    <ArcgisMap
      itemId="your-webmap-item-id"
      onArcgisViewReadyChange={(event: CustomEvent) => {
        console.log("MapView ready", event);
      }}
    >
      <ArcgisZoom position="top-left"></ArcgisZoom>
    </ArcgisMap>
  </React.StrictMode>
);

Alternatively, an example is available from the 4.31 release in the jsapi-resources repo.

License

COPYRIGHT © 2025 Esri

All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.

This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.

See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english

For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA

email: [e-mail]