Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

world-svg

kushadige401ISC0.0.2TypeScript support: included

React Interactive World Map Component

react, react-component, react-world-map, world-svg, world, world map, world map svg

readme

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

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;