{"id":13880843,"url":"https://github.com/googlemaps/react-wrapper","last_synced_at":"2025-06-22T03:42:02.571Z","repository":{"id":36977289,"uuid":"343562629","full_name":"googlemaps/react-wrapper","owner":"googlemaps","description":"Wrap React components with this libary to load the Google Maps JavaScript API.","archived":false,"fork":false,"pushed_at":"2025-06-09T04:30:18.000Z","size":4435,"stargazers_count":381,"open_issues_count":16,"forks_count":54,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-06-14T06:38:28.706Z","etag":null,"topics":["google-maps","language-extension","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlemaps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-03-01T21:30:24.000Z","updated_at":"2025-06-05T17:53:21.000Z","dependencies_parsed_at":"2023-11-06T06:22:26.482Z","dependency_job_id":"17ff9dc8-e53a-4894-8615-bd0dfc224e7b","html_url":"https://github.com/googlemaps/react-wrapper","commit_stats":{"total_commits":657,"total_committers":9,"mean_commits":73.0,"dds":0.167427701674277,"last_synced_commit":"1f38062ac516a2397bb21c64f225195f2a7bc07c"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/googlemaps/react-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlemaps","download_url":"https://codeload.github.com/googlemaps/react-wrapper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlemaps%2Freact-wrapper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260193981,"owners_count":22972620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","language-extension","react"],"created_at":"2024-08-06T08:03:32.280Z","updated_at":"2025-06-22T03:41:57.558Z","avatar_url":"https://github.com/googlemaps.png","language":"TypeScript","readme":"# Google Maps JavaScript API React Wrapper\n\n[![npm](https://img.shields.io/npm/v/@googlemaps/react-wrapper)](https://www.npmjs.com/package/@googlemaps/react-wrapper)\n![Build](https://github.com/googlemaps/react-wrapper/workflows/Test/badge.svg)\n![Release](https://github.com/googlemaps/react-wrapper/workflows/Release/badge.svg)\n[![codecov](https://codecov.io/gh/googlemaps/react-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/googlemaps/react-wrapper)\n![GitHub contributors](https://img.shields.io/github/contributors/googlemaps/react-wrapper?color=green)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat-square.png)](https://github.com/apps/in-solidarity)\n\n\u003e [!NOTE]  \n\u003e Development of this package has been discontinued. \n\u003e We recommend all users of this package to switch to the new \n\u003e [`@vis.gl/react-google-maps`](https://www.npmjs.com/package/@vis.gl/react-google-maps),\n\u003e which provides a collection of components and hooks and can be configured \n\u003e to be fully compatible with this package.\n\u003e \n\u003e See [the migration guide](https://visgl.github.io/react-google-maps/docs/guides/migrating-from-react-wrapper)\n\u003e for more details on how to switch from this package to `@vis.gl/react-google-maps`.\n\n## Description\n\nWrap React components with this library to load the Google Maps JavaScript API.\n\n```jsx\nimport {Wrapper} from '@googlemaps/react-wrapper';\n\nconst MyApp = () =\u003e (\n  \u003cWrapper apiKey={'YOUR_API_KEY'}\u003e\n    \u003cMyMapComponent /\u003e\n  \u003c/Wrapper\u003e\n);\n```\n\nThe 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.\n\n```jsx\nimport {Wrapper, Status} from '@googlemaps/react-wrapper';\n\nconst render = status =\u003e {\n  switch (status) {\n    case Status.LOADING:\n      return \u003cSpinner /\u003e;\n    case Status.FAILURE:\n      return \u003cErrorComponent /\u003e;\n    case Status.SUCCESS:\n      return \u003cMyMapComponent /\u003e;\n  }\n};\n\nconst MyApp = () =\u003e \u003cWrapper apiKey={'YOUR_API_KEY'} render={render} /\u003e;\n```\n\nWhen combining children and render props, the children will render on success and the render prop will be executed for other status values.\n\n```tsx\nimport {Wrapper, Status} from '@googlemaps/react-wrapper';\n\nconst render = (status: Status): ReactElement =\u003e {\n  if (status === Status.FAILURE) return \u003cErrorComponent /\u003e;\n  return \u003cSpinner /\u003e;\n};\n\nconst MyApp = () =\u003e (\n  \u003cWrapper apiKey={'YOUR_API_KEY'} render={render}\u003e\n    \u003cMyMapComponent /\u003e\n  \u003c/Wrapper\u003e\n);\n```\n\n### @googlemaps/js-api-loader\n\nThis wrapper uses [@googlemaps/js-api-loader][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][js_api_loader] are also accepted as props to the wrapper component.\n\n### MyMapComponent\n\nThe following snippets demonstrates the usage of `useRef` and `useEffect` hooks with Google Maps.\n\n```tsx\nfunction MyMapComponent({\n  center,\n  zoom,\n}: {\n  center: google.maps.LatLngLiteral;\n  zoom: number;\n}) {\n  const ref = useRef();\n\n  useEffect(() =\u003e {\n    new window.google.maps.Map(ref.current, {\n      center,\n      zoom,\n    });\n  });\n\n  return \u003cdiv ref={ref} id=\"map\" /\u003e;\n}\n```\n\n## Examples\n\nSee the [examples](https://github.com/googlemaps/react-wrapper/tree/main/examples) folder for additional usage patterns.\n\n- [Basic Demo](https://googlemaps.github.io/react-wrapper/public/basic/)\n\n## Install\n\nAvailable via npm as the package [@googlemaps/react-wrapper](https://www.npmjs.com/package/@googlemaps/react-wrapper).\n\n```sh\nnpm i @googlemaps/react-wrapper\n```\n\nor\n\n```sh\nyarn add @googlemaps/react-wrapper\n```\n\nFor TypeScript support additionally install type definitions.\n\n```sh\nnpm i -D @types/google.maps\n```\n\nor\n\n```sh\nyarn add -D @types/google.maps\n```\n\n## Documentation\n\nThe reference documentation can be found at this [link](https://googlemaps.github.io/react-wrapper/index.html).\n\n## Support\n\nThis library is community supported. We're comfortable enough with the stability and features of\nthe library that we want you to build real production applications on it.\n\nIf you find a bug, or have a feature suggestion, please [log an issue][issues]. If you'd like to\ncontribute, please read [How to Contribute][contrib].\n\n[issues]: https://github.com/googlemaps/react-wrapper/issues\n[contrib]: https://github.com/googlemaps/react-wrapper/blob/master/CONTRIBUTING.md\n[js_api_loader]: https://www.npmjs.com/package/@googlemaps/js-api-loader\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Freact-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglemaps%2Freact-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglemaps%2Freact-wrapper/lists"}