react-world-countries-map
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

react-world-countries-map

⚠️ 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) 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

Package Sidebar

Install

npm i react-world-countries-map

Weekly Downloads

46

Version

1.1.0

License

MIT

Unpacked Size

7.95 MB

Total Files

16

Last publish

Collaborators

  • yams