JSPM – react-world-map@2.4.0

Package Exports

react-world-map
react-world-map/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-world-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React world map

clickable world map with continent areas
click on an area to select it (approx. continents)
selecting it will change the className --> you add css to change the color
built of SVG paths

Demo

Codepen (interactive demo)

gif of map being clicked and changing colour

usage:

npm install react-world-map --save

or, include

<script src=""https://cdn.jsdelivr.net/gh/heatherbooker/react-world-map@master/dist/index.js"></script>

in your html to use the script directly.

then in your `index.jsx` or `main.jsx` (see bottom for css):

Controlled component:

<WorldMap selected={ 'sa' } onSelect={ (continent) => {} } />

Uncontrolled component:

<WorldMap />

Uncontrolled component also supports multiple selection using the multiple = { true } prop. Example:

<WorldMap
  multiple={ true }
/>

Full usage:

const React, { useState } = require('react');
const ReactDOM = require('react-dom');
const WorldMap = require('react-world-map');

function YourMainComponent() {
  const [selected, onSelect] = useState(null);

  return (
    <>
      <h1> Hello World Map!</h1>
      <WorldMap selected={ selected } onSelect={ onSelect } />
    </>
  );
}

ReactDOM.render(
  <YourMainComponent />,
  document.getElementById('react-app')
)

Props

onSelect: (continentCode) => void
selected: continentCode

whereas the list of possible continents is as follows:

na - North America
sa - South America
af - Africa
eu - Europe
as - Asia
oc - Oceania

make sure to set your css to target the map:

.map-selected {
  fill: #E3DA37;
}

.map-unselected {
  fill: #699EAA;
}

.map-selected:hover, .map-unselected:hover {
  cursor: pointer;
}

Please feel free to fork and PR if you think you have developed something useful!

license: WTFPL

bonus: blog post on the making of this map :)

react-world-map