esri-loader-react
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
npm installnpm run build
you can run the demo using npm start