React Vector Maps

👋 Welcome!

Below you'll find a getting start guide for using the package in your app. There is also a collection of 100+ maps that are ready to use with the component.

You might be interested in some examples of how the component can be used and note that you can also turn your own SVG into a valid map with our converter.

Stars on the project are always appreciated! 🙂

To report an issue or contribute to the project please visit our Github.

Getting started

Install the package with either

• npm i @south-paw/react-vector-maps
• yarn add @south-paw/react-vector-maps

You can then use the component as follows

import { VectorMap } from '@south-paw/react-vector-maps';

The VectorMapcomponent accepts a correctly structured object being spread onto it.

You can download and save a valid JSON object from the maps page or you can create your own using our online SVG to JSON converter.

When you've got your map file, just import it and then combine it with the component as follows:

class App extends React.Component {
  render() {
    return <VectorMap {...worldLowRes} />;
  }
}