Skip to content
🚡 A React component wrapper around esri-loader
JavaScript
Branch: master
Clone or download
Latest commit b95b1a6 Jan 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/src tweak demo Jan 2, 2018
docs demo tweak Jan 3, 2018
src only render children if valid Jan 3, 2018
tests update tests Nov 13, 2017
.gitignore switch to nwb Jun 20, 2017
.travis.yml build update Jul 14, 2017
CONTRIBUTING.md switch to nwb Jun 20, 2017
README.md demo tweak Jan 3, 2018
nwb.config.js add code to demo Jan 1, 2018
package-lock.json update dev deps Jan 7, 2018
package.json update dev deps Jan 7, 2018

README.md

esri-loader-react

Build Status

npm

A React component wrapper around esri-loader

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

Usage

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: 'https://js.arcgis.com/4.6/'
    };

    return (
      <EsriLoaderReact 
        options={options} 
        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

Examples

You can’t perform that action at this time.