World Map
WorldMap is an svg component for React. Renders a responsive world map. It is customizable, works great with tiny screens and can be styled to match any design.
Installation
npm install world-svg # using npm
yarn add world-svg # using yarnExample
import { WorldMap } from 'world-svg';
function App() {
return (
<WorldMap />
);
}
export default App;WorldMap props
| Attribute | Type | Default | Description |
|---|---|---|---|
| tooltip | string |
on |
Specify tooltip whether on or off |
| landColor | string |
#2db7f5 |
Country color. |
| hoverColor | string |
#2db7f5 |
Country color on hover. |
| landBorder | string |
#2db7f5 |
Color for Country borders. |
| tooltipBgColor | string |
#2db7f5 |
Tooltip background color. |
| tooltipTextColor | string |
#2db7f5 |
Tooltip text color. |
| onCountryClick | function |
null |
Event function that triggered on specific country click. It can take an argument in order to receive clicked country alpha-2 code. |
onCountryClick Example
import { WorldMap } from 'world-svg';
const handleCountryClick = (countryId) => {
console.log(countryId); // Outs: RU, TR, US, ... etc.
}
function App() {
return (
<WorldMap onCountryClick={handleCountryClick} />
);
}
export default App;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent