React Installation | Documentation

React is a popular JavaScript library. This tutorial will show you how to install our maps within a React component.

Download Demo

To use the map in a React component, follow these steps:

1. Choose the map you want to install:
   HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 County Map HTML5 Congress Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map HTML5 Country Map

2. Add the React library to our webpage. For simplicity, we use a CDN to embed React.

   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
   

3. Embed the map files directly onto the webpage.

   <script src="mapdata.js"></script>
   <script src="usmap.js"></script>
   

4. Disable the map's default auto loading.

   <script>simplemaps_usmap_mapdata.main_settings.auto_load = 'no';</script>
   

   Alternatively, you could do this within the mapdata.js file.

5. Add the following HTML to your webpage:

   <div id="react_container"></div>
   

   This is the container <div> that React will control.

6. Add the following JavaScript to your webpage:

   <script>
   'use strict';
   
   const e = React.createElement;
   
   class SimpleMapsComponent extends React.Component {
   
     render() {
   	return e('div', {id:'map'})
     }
     
     componentDidMount(){
   	 simplemaps_usmap.load();
     }
   }
   
   const domContainer = document.querySelector('#react_container');
   ReactDOM.render(e(SimpleMapsComponent), domContainer);
   </script>
   

   This code creates a React component, populates it with a target div for the map (#map), and then manually loads the map once the component has been mounted.

7. That's all! You now have a map component that will load your map when it is mounted. To learn more, download the demo and review the source code. If you still have any questions, contact us for help.