npmpackage.info

@googlemaps/react-wrapper

Wrap React components with this libary to load the Google Maps JavaScript API.

1.1.42

374

Apache-2.0

TypeScript

34.21 kB

17,548,413 6.3

Installations

npm install @googlemaps/react-wrapper

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Node Version

20.16.0

NPM Version

10.8.1 Score

94.9

Supply Chain

100

Quality

80.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

8

Total

784

Closed

43

Merged

733

Issues

Open

10

Total

67

Closed

57

Releases

v1.1.42

Published on 09 Aug 2024

v1.1.41

Published on 15 Feb 2024

v1.1.40

Published on 02 Jan 2023

v1.1.39

Published on 28 Nov 2022

v1.1.38

Published on 17 Oct 2022

v1.1.37

Published on 05 Sept 2022

View all 45 releases

Contributors

View all 18 contributors

Languages

TypeScript

JavaScript

TypeScript (55.81%)

JavaScript (44.19%)

Developer

googlemaps

Download Statistics

Total Downloads

17,548,413

Last Day

4,595

Last Week

83,098

Last Month

534,129

Last Year

7,260,793

GitHub Statistics

374 Stars

794 Commits

54 Forks

14 Watching

10 Branches

18 Contributors

Maintainers

Package Meta Information

Latest Version

1.1.42

Package Id

@googlemaps/react-wrapper@1.1.42

Unpacked Size

34.21 kB

Size

9.03 kB

File Count

NPM Version

10.8.1

Node Version

20.16.0

Publised On

09 Aug 2024

Total Downloads

Cumulative downloads

Total Downloads

17,548,413

Last day

-83.1%

4,595

Compared to previous day

Last week

-39.3%

83,098

Compared to previous week

Last month

-9.4%

534,129

Compared to previous month

Last year

1.1%

7,260,793

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Google Maps JavaScript API React Wrapper

GitHub contributors

Description

Wrap React components with this library to load the Google Maps JavaScript API.

1import { Wrapper } from "@googlemaps/react-wrapper";
2
3const MyApp = () => (
4  <Wrapper apiKey={"YOUR_API_KEY"}>
5    <MyMapComponent />
6  </Wrapper>
7);

The preceding example will not render any elements unless the Google Maps JavaScript API is successfully loaded. To handle error cases and the time until load is complete, it is recommended to provide render props.

1import { Wrapper, Status } from "@googlemaps/react-wrapper";
2
3const render = (status) => {
4  switch (status) {
5    case Status.LOADING:
6      return <Spinner />;
7    case Status.FAILURE:
8      return <ErrorComponent />;
9    case Status.SUCCESS:
10      return <MyMapComponent />;
11  }
12};
13
14const MyApp = () => <Wrapper apiKey={"YOUR_API_KEY"} render={render} />;

When combining children and render props, the children will render on success and the render prop will be executed for other status values.

1import { Wrapper, Status } from "@googlemaps/react-wrapper";
2
3const render = (status: Status): ReactElement => {
4  if (status === Status.FAILURE) return <ErrorComponent />;
5  return <Spinner />;
6};
7
8const MyApp = () => (
9  <Wrapper apiKey={"YOUR_API_KEY"} render={render}>
10    <MyMapComponent />
11  </Wrapper>
12);

@googlemaps/js-api-loader

This wrapper uses @googlemaps/js-api-loader to load the Google Maps JavaScript API. This library uses a singleton pattern and will not attempt to load the library more than once. All options accepted by @googlemaps/js-api-loader are also accepted as props to the wrapper component.

MyMapComponent

The following snippets demonstrates the usage of useRef and useEffect hooks with Google Maps.

1function MyMapComponent({
2  center,
3  zoom,
4}: {
5  center: google.maps.LatLngLiteral;
6  zoom: number;
7}) {
8  const ref = useRef();
9
10  useEffect(() => {
11    new window.google.maps.Map(ref.current, {
12      center,
13      zoom,
14    });
15  });
16
17  return <div ref={ref} id="map" />;
18}

Examples

See the examples folder for additional usage patterns.

Basic Demo

Install

Available via npm as the package @googlemaps/react-wrapper.

1npm i @googlemaps/react-wrapper

1yarn add @googlemaps/react-wrapper

For TypeScript support additionally install type definitions.

1npm i -D @types/google.maps

1yarn add -D @types/google.maps

Documentation

The reference documentation can be found at this link.

Support

This library is community supported. We're comfortable enough with the stability and features of the library that we want you to build real production applications on it.

If you find a bug, or have a feature suggestion, please log an issue. If you'd like to contribute, please read How to Contribute.

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

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.

10

SAST

Determines if the project uses static code analysis.

7

Code-Review

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

7

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Maintained

Determines if the project is "actively maintained".

3

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 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:85: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/docs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-please.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-please.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/release-please.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/googlemaps/react-wrapper/test.yml/main?enable=pin
Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 3 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

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

Fuzzing

Determines if the project uses fuzzing.

Score

6.3

/10

Last Scanned on 2024-12-23

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

@googlemaps/react-wrapper

Installations

Developer Guide

Yes

CommonJS, UMD

20.16.0

10.8.1

Score

Pull Requests

8

784

43

733

Issues

10

67

57

Releases

Contributors

Languages

Developer

googlemaps

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

17,548,413

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Google Maps JavaScript API React Wrapper

Description

@googlemaps/js-api-loader

MyMapComponent

Examples

Install

Documentation

Support

10

10

10

10

10

7

7

5

3

0

0

0

6.3

/10