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.

!World Map

$3

``shell
npm install world-svg # using npm
yarn add world-svg # using yarn
`

$3

`tsx
import { WorldMap } from 'world-svg';

function App() {
return (

);
}

export default App;
`

$3

| 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. |

$3

`tsx
import { WorldMap } from 'world-svg';

const handleCountryClick = (countryId) => {
console.log(countryId); // Outs: RU, TR, US, ... etc.
}

function App() {
return (

);
}

export default App;
``