Esri Loader React Save

:aerial_tramway: A React component wrapper around esri-loader

Project README


Build Status


A React component wrapper around esri-loader

Version 2.x of this library is compatible with esri-loader 1.5.0 and higher.


npm install react react-dom prop-types esri-loader esri-loader-react

Mount the loader component to load the Esri JS API when you will need it in your app. You can pass in the options that get forwarded to the esri-loader loadModules function.

You can still use this component as a means of pre-loading the Esri JS API though it is less useful now that esri-loader version 1.5.0 onward is basically a 1-liner to do this. Instead, the main usage of this component is likely to be ensuring that the Esri JS API is ready to use and the modules you need are available and these can then be used to do something in your UI with a DOM node mounted for you to use. If you don't need to auto inject a container node into your UI then set renderMapContainer={false}. You can pass through children to be rendered too.

import React, {PureComponent} from 'react';
import EsriLoaderReact from 'esri-loader-react';

class AppMain extends PureComponent {

  render() {
    const options = {
      url: ''

    return (
        modulesToLoad={['esri/Map', 'esri/views/MapView']}    
        onReady={({loadedModules: [Map, MapView], containerNode}) => {
          new MapView({
            container: containerNode,
            map: new Map({basemap: 'oceans'})

you can still use the functions from esri-loader elsewhere in your code as needed.

The component has the following properties

EsriLoaderReact.propTypes = {
  renderMapContainer: PropTypes.bool, // default is true
  mapContainerClassName: PropTypes.string, // default is 'map-view'
  modulesToLoad: PropTypes.arrayOf(PropTypes.string),
  options: PropTypes.shape({
    url: PropTypes.string,
    dojoConfig: PropTypes.object
  onError: PropTypes.func, // (error, info) => also called from componentDidCatch, default is onError: (error, info) => console.error(error),
  onReady: PropTypes.func, // ({loadedModules, containerNode}) => containerNode is null if renderMapContainer !== true

Build locally

  1. npm install
  2. npm run build

you can run the demo using npm start


Open Source Agenda is not affiliated with "Esri Loader React" Project. README Source: davetimmins/esri-loader-react

Open Source Agenda Badge

Open Source Agenda Rating