react-arcgis-js

A set of React components for the 4.0 version of the ArcGIS API for JavaScript

Installation

Add the package from npm:

$ npm install --save react-arcgis-js
# or
$ yarn add react-arcgis-js

Load the JS API styles:

<link href="https://js.arcgis.com/4.6/esri/css/main.css" rel="stylesheet">

Basic Usage

Render a Map:

import React from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'react-arcgis-js';

ReactDOM.render(
  <Map />,
  document.getElementById('root')
);

Render a Map and FeatureLayer

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, Feature } from 'react-arcgis-js';

ReactDOM.render(
  <Map>
    <Feature itemId="8444e275037549c1acab02d2626daaee"/>
  </Map>,
  document.getElementById('root')
);

Examples available at https://brygrill.github.io/react-arcgis-js

Components

Map

Render a Map or WebMap. Pass an itemId prop to render WebMap via Portal Item ID or pass a baseMap prop to render a Map.

Props:

Property	Type	Required	Default	Description
itemId	string	false	None	Id of webmap to load
baseMap	string	false	streets-navigation-vector	Basemap to load
height	string	false	500px	height of map container in px or %
width	string	false	100%	width of map container in px or %
center	array	false	[-122.41, 37.77]	coordinates to center the map on
zoom	number	false	10	starting zoom level of the map
webGL	boolean	false	false	load dojo config to enable WebGL Feature Layers
onLoadingContent	any	false	Loading...	string or component to render while loading map
onErrorContent	any	false	Error loading map...	string or component to render on error
onError	function	false	None	Will return on error to handle as you wish
onMapClick	function	false	None	Will return mapPoint and graphics object on map click

Map Children:
The following props are passed to child components of <Map/>:

Property	Type	Description
map	object	Map or WebMap object
view	object	MapView object
loading	boolean	loading status
error	boolean	error status

Feature

Render a FeatureLayer as a child of <Map/> component. Pass a url prop to render via service URL or itemId to render via Portal Item ID.

Props:

Property	Type	Required	Default	Description
url	string	false	None	render FeatureLayer via service URL
itemId	string	false	None	render FeatureLayer via Portal Item ID

Acknowledgments

Wouldn't be possible without these projects:

• react-arcgis
• esri-loader