npmpackage.info

Gathering detailed insights and metrics for react-svg-worldmap-pi

react-svg-worldmap-pi - 2.0.0-alpha.1.8 | npmpackage.info

react-svg-worldmap-pi

A simple, compact and free React SVG world map.

2.0.0-alpha.1.8

122

MIT

TypeScript

79.23 kB

1,394 2.6

Installations

npm install react-svg-worldmap-pi

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=10

Score

68.6

Supply Chain

59.5

Quality

75.3

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

1,394

Last Day

Last Week

Last Month

Last Year

291

GitHub Statistics

MIT License

122 Stars

253 Commits

48 Forks

3 Watchers

4 Branches

7 Contributors

Updated on Apr 25, 2025

Bundle Size

220.37 kB

Minified

79.23 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 7 Contributors

Package Meta Information

Latest Version

2.0.0-alpha.1.8

Package Id

react-svg-worldmap-pi@2.0.0-alpha.1.8

Unpacked Size

571.98 kB

Size

83.73 kB

File Count

Total Downloads

Cumulative downloads

Total Downloads

1,394

Last Day

Compared to previous day

Last Week

100%

Compared to previous week

Last Month

-20.9%

Compared to previous month

Last Year

-7.6%

291

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.

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

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

CII-Best-Practices

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

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

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-12

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

react-svg-worldmap-pi

Installations

Developer Guide

Yes

CommonJS

>=10

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

220.37 kB

79.23 kB

Maintainers

Package Meta Information

Total Downloads

1,394

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?

Install

Usage

License

10

10

10

1

0

0

0

0

0

0

0

0

0

2.6

/10