clickable world map built with React with css changes
npm install 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
npm install react-world-map --save
`
or, include
`
`
in your html to use the script directly.#### then in your
index.jsx or main.jsx (see bottom for css):Controlled component:
`jsx
{} } />
`Uncontrolled component:
`jsx
`Uncontrolled component also supports multiple selection using the
multiple = { true } prop. Example:
`jsx
multiple={ true }
/>
`Full usage:
`jsx
const React, { useState } = require('react');
const ReactDOM = require('react-dom');
const WorldMap = require('react-world-map');function YourMainComponent() {
const [selected, onSelect] = useState(null);
return (
<>
Hello World Map!
>
);
}ReactDOM.render(
,
document.getElementById('react-app')
)
`#### Props
-
onSelect: (continentCode) => void
- selected: continentCodewhereas the list of possible continents is as follows:
-
na - North America
- sa - South America
- af - Africa
- eu - Europe
- as - Asia
- oc - Oceania$3
`css
.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 :)