npmpackage.info

Gathering detailed insights and metrics for react-svg-worldmap

Other packages similar to react-svg-worldmap

react-simple-maps

3.0.0

An svg map chart component built with and for React

react-svg-worldmap-pi

2.0.0-alpha.1.8

A pure react component to draw a map of world countries. Simple. Free.

react-svg-worldmap-corona

0.0.1

A pure react component to draw a map of world countries. Simple. Free.

@pubgenius/react-simple-maps

3.0.5

An svg map chart component built with and for React

Gathering detailed insights and metrics for react-svg-worldmap

react-svg-worldmap - 2.0.0-alpha.16 | npmpackage.info

react-svg-worldmap

A simple, compact and free React SVG world map.

2.0.0-alpha.16

122

MIT

TypeScript

78.99 kB

598,615 2.6

Installations

npm install react-svg-worldmap

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=14.16

Node Version

18.15.0

NPM Version

9.6.3 Score

81.1

Supply Chain

87.1

Quality

75.9

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

4

Total

113

Closed

19

Merged

90

Issues

Open

5

Total

42

Closed

37

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

CSS

Shell

TypeScript (98.45%)

JavaScript (1.02%)

CSS (0.5%)

Shell (0.03%)

Developer

yanivam

Download Statistics

Total Downloads

598,615

Last Day

461

Last Week

6,642

Last Month

27,588

Last Year

309,710

GitHub Statistics

MIT License

122 Stars

253 Commits

48 Forks

3 Watchers

4 Branches

7 Contributors

Updated on Apr 25, 2025

Bundle Size

219.69 kB

Minified

78.99 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

2.0.0-alpha.16

Package Id

react-svg-worldmap@2.0.0-alpha.16

Unpacked Size

567.73 kB

Size

81.03 kB

File Count

NPM Version

9.6.3

Node Version

18.15.0

Published on

Apr 04, 2023

Total Downloads

Cumulative downloads

Total Downloads

598,615

Last Day

42.7%

461

Compared to previous day

Last Week

-3.5%

6,642

Compared to previous week

Last Month

-9.7%

27,588

Compared to previous month

Last Year

85%

309,710

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

react-svg-worldmap

A simple, compact and free React SVG world map.

simple example

Documentation & Examples

We use GitHub pages to provide documentation with ample of live examples.

Give it a try at yanivam.github.io/react-svg-worldmap.

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-svg-worldmap started.

Where are we getting the data for the world map?

We have sourced our data from Natural Earth, a community-driven initiative aimed at creating visually appealing and high-quality maps using cartography or GIS software for small-scale projects. Our use of open source tools in creating this map data is not intended to express any political views, but rather to fulfill the requirements of this project. Link to the data: https://www.naturalearthdata.com/downloads/110m-physical-vectors/110m-land/

Install

In order to install, run the following command:

$ npm install react-svg-worldmap --save

Usage

Here is a simple example:

1import * as React from "react";
2import WorldMap from "react-svg-worldmap";
3import "./App.css";
4
5function App() {
6  const data = [
7    { country: "cn", value: 1389618778 }, // china
8    { country: "in", value: 1311559204 }, // india
9    { country: "us", value: 331883986 }, // united states
10    { country: "id", value: 264935824 }, // indonesia
11    { country: "pk", value: 210797836 }, // pakistan
12    { country: "br", value: 210301591 }, // brazil
13    { country: "ng", value: 208679114 }, // nigeria
14    { country: "bd", value: 161062905 }, // bangladesh
15    { country: "ru", value: 141944641 }, // russia
16    { country: "mx", value: 127318112 }, // mexico
17  ];
18
19  return (
20    <div className="App">
21      <WorldMap
22        color="red"
23        title="Top 10 Populous Countries"
24        value-suffix="people"
25        size="lg"
26        data={data}
27      />
28    </div>
29  );
30}

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/deploy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/publish.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-build.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/test-build.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-build.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/yanivam/react-svg-worldmap/test-build.yml/main?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-svg-worldmap

Other packages similar to react-svg-worldmap

react-svg-worldmap

Installations

Developer Guide

Yes

CommonJS

>=14.16

18.15.0

9.6.3

Score

Pull Requests

4

113

19

90

Issues

5

42

37

Releases

Unable to fetch releases

Languages

Developer

yanivam

Download Statistics

GitHub Statistics

Bundle Size

219.69 kB

78.99 kB

Maintainers

Package Meta Information

Total Downloads

598,615

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

react-svg-worldmap

Documentation & Examples

Why is it different?

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

Where are we getting the data for the world map?

Install

Usage

License

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10