world-svg

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 yarn

Example

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;