react-world-countries-map

:warning: This package is not longer maintained. The project was moved to a new home at react-svg-worldmap.

Old content

A pure react component to visualize world maps with highlighted countries. Simple. Free. No Registration, No access token, No back-end service.

import { ReactWorldCountriesMap } from "react-world-countries-map"
...
const data =
    [
      { country: "cn", value: 1389618778 }, // china
      { country: "in", value: 1311559204 }, // india
    ]
...
<ReactWorldCountriesMap color="red" title="This is My Map" size="lg" data={data} />

Why is it different?

Focus on simple and free.

• Draw countries on a world map.
• Free - Really free with no limits.
• No registration - It is just a pure react component.
• No internet dependency - All the data is local, no calls to a back-end server.
• Easy to learn, easy to use, easy to customize.

Yet another package for world map...but why?

It all started with a fun project that I was building and needed to draw simple yet beautiful world's map. Searching for solutions I found many potential solutions like MapBox and Google Maps, but they were "too smart" for what I needed. They needed to "call home" for the data, they supported tons of options I didn't need, and while they included react-integrations, they were not completely native to the react world. There was definitely something missing. And that's when react-world-countries-map started.

Install

In order to install, run the following command:

$ npm install react-world-countries-map --save

Usage

Explore the example folder for a simple case for an end-to-end react app using the react-world-countries-map.

Here is a simple example:

import React from "react"
import "./App.css"
import { ReactWorldCountriesMap } from "react-world-countries-map"

function App() {
  const data =
    [
      { country: "cn", value: 1389618778 }, // china
      { country: "in", value: 1311559204 }, // india
      { country: "us", value: 331883986 },  // united states
      { country: "id", value: 264935824 },  // indonesia
      { country: "pk", value: 210797836 },  // pakistan
      { country: "br", value: 210301591 },  // brazil
      { country: "ng", value: 208679114 },  // nigeria
      { country: "bd", value: 161062905 },  // bangladesh
      { country: "ru", value: 141944641 },  // russia
      { country: "mx", value: 127318112 }   // mexico
    ]

  return (
    <div className="App" >
       <ReactWorldCountriesMap color="red" title="Top 10 Populous Countries" value-suffix="people" size="lg" data={data} />
    </div>
  )
}

Customization

Data

The only mandatory prop. Data contains an array of country/value objects, with values for countries that you have values for, (countries without a value will be blank). The country code is a 2 character string representing the country ([ISO alpha-2] (https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)) and value is a number.

Example of valid data prop:

  const data =
    [
      { country: "cn", value: 1 }, // china
      { country: "in", value: 2 }, // india
      { country: "us", value: 3 }  // united states
    ]

Optional Props

| Prop | Type | Description | | ---------------- | ------ | ----------- | | size | string | The size of your map, either "sm", md", or "lg" | | title | string | Any string for the title of your map | | color | string | Background color for countries. A standard color string. E.g. "red" or "#ff0000" | | tooltipBgColor | string | Tooltip background color | | tooltipTextColor | string | Tooltip text color | | value-prefix | string | A string to prefix values in tooltips. E.g. "$" | | value-suffix | string | A string to suffix values in tooltips. E.g. "USD" |

License

MIT