├── .eslintignore ├── .eslintrc.json ├── .github ├── CODEOWNERS ├── dependabot.yml ├── sync-repo-settings.yaml └── workflows │ ├── codeql.yml │ ├── dependabot.yml │ ├── docs.yml │ ├── release-please.yml │ └── test.yml ├── .gitignore ├── .prettierrc.js ├── .releaserc ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── examples └── basic.tsx ├── jest.config.js ├── package-lock.json ├── package.json ├── rollup.config.examples.js ├── rollup.config.js ├── src ├── index.test.tsx └── index.tsx ├── tsconfig.examples.json ├── tsconfig.json └── typedoc.js /.eslintignore: -------------------------------------------------------------------------------- 1 | bazel-* 2 | coverage/ 3 | dist/ 4 | docs/ 5 | lib/ 6 | node_modules/ 7 | public/ -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "plugin:prettier/recommended"], 3 | "parserOptions": { 4 | "ecmaVersion": 12, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "jsx": true 8 | } 9 | }, 10 | "plugins": ["jest"], 11 | "rules": { 12 | "no-var": 2, 13 | "prefer-arrow-callback": 2 14 | }, 15 | "overrides": [ 16 | { 17 | "files": ["*.ts", "*.tsx"], 18 | "parser": "@typescript-eslint/parser", 19 | "plugins": ["@typescript-eslint"], 20 | "extends": ["plugin:@typescript-eslint/recommended"], 21 | "rules": { 22 | "@typescript-eslint/ban-ts-comment": 0, 23 | "@typescript-eslint/no-empty-function": 1, 24 | "@typescript-eslint/member-ordering": 1, 25 | "@typescript-eslint/explicit-member-accessibility": [ 26 | 1, 27 | { 28 | "accessibility": "explicit", 29 | "overrides": { 30 | "accessors": "explicit", 31 | "constructors": "no-public", 32 | "methods": "explicit", 33 | "properties": "explicit", 34 | "parameterProperties": "explicit" 35 | } 36 | } 37 | ] 38 | } 39 | } 40 | ], 41 | "env": { 42 | "browser": true, 43 | "node": true, 44 | "es6": true, 45 | "jest/globals": true 46 | }, 47 | "globals": { "google": "readonly" } 48 | } 49 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners 16 | 17 | .github/ @googlemaps/admin 18 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | version: 2 16 | updates: 17 | - package-ecosystem: "npm" 18 | directory: "/" 19 | schedule: 20 | interval: "weekly" 21 | -------------------------------------------------------------------------------- /.github/sync-repo-settings.yaml: -------------------------------------------------------------------------------- 1 | # Copyright 2022 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # https://github.com/googleapis/repo-automation-bots/tree/main/packages/sync-repo-settings 16 | 17 | rebaseMergeAllowed: true 18 | squashMergeAllowed: true 19 | mergeCommitAllowed: false 20 | deleteBranchOnMerge: true 21 | branchProtectionRules: 22 | - pattern: main 23 | isAdminEnforced: false 24 | requiresStrictStatusChecks: false 25 | requiredStatusCheckContexts: 26 | - 'cla/google' 27 | - 'test' 28 | - 'snippet-bot check' 29 | - 'header-check' 30 | requiredApprovingReviewCount: 1 31 | requiresCodeOwnerReviews: true 32 | - pattern: master 33 | isAdminEnforced: false 34 | requiresStrictStatusChecks: false 35 | requiredStatusCheckContexts: 36 | - 'cla/google' 37 | - 'test' 38 | - 'snippet-bot check' 39 | - 'header-check' 40 | requiredApprovingReviewCount: 1 41 | requiresCodeOwnerReviews: true 42 | permissionRules: 43 | - team: admin 44 | permission: admin 45 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | # For most projects, this workflow file will not need changing; you simply need 16 | # to commit it to your repository. 17 | # 18 | # You may wish to alter this file to override the set of languages analyzed, 19 | # or to provide custom queries or build logic. 20 | # 21 | # ******** NOTE ******** 22 | # We have attempted to detect the languages in your repository. Please check 23 | # the `language` matrix defined below to confirm you have the correct set of 24 | # supported CodeQL languages. 25 | # 26 | name: "CodeQL" 27 | 28 | on: 29 | push: 30 | branches: [main] 31 | pull_request: 32 | # The branches below must be a subset of the branches above 33 | branches: [main] 34 | schedule: 35 | - cron: "0 13 * * *" 36 | 37 | jobs: 38 | analyze: 39 | name: Analyze 40 | runs-on: ubuntu-latest 41 | permissions: 42 | actions: read 43 | contents: read 44 | security-events: write 45 | 46 | strategy: 47 | fail-fast: false 48 | matrix: 49 | language: ["javascript"] 50 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 51 | # Learn more: 52 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 53 | 54 | steps: 55 | - name: Checkout repository 56 | uses: actions/checkout@v4 57 | 58 | # Initializes the CodeQL tools for scanning. 59 | - name: Initialize CodeQL 60 | uses: github/codeql-action/init@v3 61 | with: 62 | languages: ${{ matrix.language }} 63 | # If you wish to specify custom queries, you can do so here or in a config file. 64 | # By default, queries listed here will override any specified in a config file. 65 | # Prefix the list here with "+" to use these queries and those in the config file. 66 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 67 | 68 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 69 | # If this step fails, then you should remove it and run the build manually (see below) 70 | - name: Autobuild 71 | uses: github/codeql-action/autobuild@v3 72 | 73 | # ℹ️ Command-line programs to run using the OS shell. 74 | # 📚 https://git.io/JvXDl 75 | 76 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 77 | # and modify them (or add more) to build your code if your project 78 | # uses a compiled language 79 | 80 | #- run: | 81 | # make bootstrap 82 | # make release 83 | 84 | - name: Perform CodeQL Analysis 85 | uses: github/codeql-action/analyze@v3 86 | -------------------------------------------------------------------------------- /.github/workflows/dependabot.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2022 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Dependabot 16 | on: pull_request 17 | 18 | permissions: 19 | contents: write 20 | 21 | jobs: 22 | test: 23 | uses: ./.github/workflows/test.yml 24 | 25 | dependabot: 26 | needs: test 27 | runs-on: ubuntu-latest 28 | if: ${{ github.actor == 'dependabot[bot]' }} 29 | env: 30 | PR_URL: ${{github.event.pull_request.html_url}} 31 | GITHUB_TOKEN: ${{secrets.SYNCED_GITHUB_TOKEN_REPO}} 32 | steps: 33 | - name: approve 34 | run: gh pr review --approve "$PR_URL" 35 | - name: merge 36 | run: gh pr merge --auto --squash --delete-branch "$PR_URL" 37 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Docs 16 | on: [push, pull_request] 17 | jobs: 18 | docs: 19 | runs-on: ubuntu-latest 20 | permissions: 21 | contents: write 22 | steps: 23 | - name: Checkout 24 | uses: actions/checkout@v4 25 | - name: Setup Node 26 | uses: actions/setup-node@v4 27 | with: 28 | node-version: 22 29 | cache: npm 30 | - name: Install Dependencies 31 | run: npm ci 32 | - name: Build Documentation 33 | run: npm run docs 34 | - if: github.ref == 'refs/heads/main' 35 | name: Publish to GitHub Pages 36 | uses: peaceiris/actions-gh-pages@v4 37 | with: 38 | github_token: ${{ secrets.GITHUB_TOKEN }} 39 | publish_dir: ./docs 40 | user_name: "googlemaps-bot" 41 | user_email: "googlemaps-bot@users.noreply.github.com" 42 | commit_message: ${{ github.event.head_commit.message }} 43 | -------------------------------------------------------------------------------- /.github/workflows/release-please.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | ## Runs the release-please action for all new pushes to the main branch. 16 | ## This will create new release-PRs, create GitHub releases and update 17 | ## the CHANGELOG.md. 18 | 19 | on: 20 | push: 21 | branches: [main] 22 | 23 | permissions: 24 | contents: write 25 | pull-requests: write 26 | 27 | name: Release Please 28 | 29 | jobs: 30 | release-please: 31 | runs-on: ubuntu-latest 32 | steps: 33 | - id: release 34 | name: Release Please 35 | uses: googleapis/release-please-action@v4 36 | 37 | with: 38 | release-type: node 39 | token: ${{ secrets.SYNCED_GITHUB_TOKEN_REPO }} 40 | 41 | # Everything below is for NPM publishing when a release is cut. 42 | # Note the "if" statement on all commands to make sure that publishing 43 | # only happens when a release is cut. 44 | 45 | - if: ${{ steps.release.outputs.release_created }} 46 | name: Checkout 47 | uses: actions/checkout@v4 48 | 49 | - if: ${{ steps.release.outputs.release_created }} 50 | name: Setup Node for Dependency Installation 51 | uses: actions/setup-node@v4 52 | with: 53 | node-version: 22 54 | cache: npm 55 | 56 | - if: ${{ steps.release.outputs.release_created }} 57 | name: Install Dependencies 58 | run: npm ci 59 | 60 | # Now configure node with the registry used for publishing 61 | - if: ${{ steps.release.outputs.release_created }} 62 | name: Setup Node for Publishing 63 | uses: actions/setup-node@v4 64 | with: 65 | node-version: 22 66 | registry-url: "https://wombat-dressing-room.appspot.com/" 67 | 68 | - if: ${{ steps.release.outputs.release_created }} 69 | name: Publish 70 | # npm publish will trigger the build via the prepack hook 71 | run: npm publish 72 | env: 73 | NODE_AUTH_TOKEN: ${{ secrets.NPM_WOMBAT_TOKEN }} 74 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | # Copyright 2021 Google LLC 2 | # 3 | # Licensed under the Apache License, Version 2.0 (the "License"); 4 | # you may not use this file except in compliance with the License. 5 | # You may obtain a copy of the License at 6 | # 7 | # http://www.apache.org/licenses/LICENSE-2.0 8 | # 9 | # Unless required by applicable law or agreed to in writing, software 10 | # distributed under the License is distributed on an "AS IS" BASIS, 11 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | # See the License for the specific language governing permissions and 13 | # limitations under the License. 14 | 15 | name: Test 16 | on: [push, pull_request, workflow_call] 17 | 18 | jobs: 19 | test: 20 | runs-on: ubuntu-latest 21 | steps: 22 | - name: Checkout 23 | uses: actions/checkout@v4 24 | - name: Setup Node 25 | uses: actions/setup-node@v4 26 | with: 27 | node-version: 22 28 | cache: npm 29 | - name: Install Dependencies 30 | run: npm ci 31 | 32 | - name: Run eslint 33 | run: npm run lint 34 | - name: Run Unit Tests 35 | run: npm test 36 | - name: Collect Coverage Data 37 | uses: codecov/codecov-action@v1 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist/ 3 | .npmrc 4 | **/docs 5 | coverage 6 | 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | lerna-debug.log* 14 | 15 | # Diagnostic reports (https://nodejs.org/api/report.html) 16 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 17 | 18 | # Runtime data 19 | pids 20 | *.pid 21 | *.seed 22 | *.pid.lock 23 | 24 | # Directory for instrumented libs generated by jscoverage/JSCover 25 | lib-cov 26 | 27 | # Coverage directory used by tools like istanbul 28 | coverage 29 | *.lcov 30 | 31 | # nyc test coverage 32 | .nyc_output 33 | 34 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 35 | .grunt 36 | 37 | # Bower dependency directory (https://bower.io/) 38 | bower_components 39 | 40 | # node-waf configuration 41 | .lock-wscript 42 | 43 | # Compiled binary addons (https://nodejs.org/api/addons.html) 44 | build/Release 45 | 46 | # Dependency directories 47 | node_modules/ 48 | jspm_packages/ 49 | 50 | # TypeScript v1 declaration files 51 | typings/ 52 | 53 | # TypeScript cache 54 | *.tsbuildinfo 55 | 56 | # Optional npm cache directory 57 | .npm 58 | 59 | # Optional eslint cache 60 | .eslintcache 61 | 62 | # Microbundle cache 63 | .rpt2_cache/ 64 | .rts2_cache_cjs/ 65 | .rts2_cache_es/ 66 | .rts2_cache_umd/ 67 | 68 | # Optional REPL history 69 | .node_repl_history 70 | 71 | # Output of 'npm pack' 72 | *.tgz 73 | 74 | # Yarn Integrity file 75 | .yarn-integrity 76 | 77 | # dotenv environment variables file 78 | .env 79 | .env.test 80 | 81 | # parcel-bundler cache (https://parceljs.org/) 82 | .cache 83 | 84 | # next.js build output 85 | .next 86 | 87 | # nuxt.js build output 88 | .nuxt 89 | 90 | # gatsby files 91 | .cache/ 92 | public 93 | 94 | # vuepress build output 95 | .vuepress/dist 96 | 97 | # Serverless directories 98 | .serverless/ 99 | 100 | # FuseBox cache 101 | .fusebox/ 102 | 103 | # DynamoDB Local files 104 | .dynamodb/ 105 | 106 | # TernJS port file 107 | .tern-port 108 | 109 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm 110 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 111 | 112 | # User-specific stuff 113 | .idea/**/workspace.xml 114 | .idea/**/tasks.xml 115 | .idea/**/usage.statistics.xml 116 | .idea/**/dictionaries 117 | .idea/**/shelf 118 | 119 | # Generated files 120 | .idea/**/contentModel.xml 121 | 122 | # Sensitive or high-churn files 123 | .idea/**/dataSources/ 124 | .idea/**/dataSources.ids 125 | .idea/**/dataSources.local.xml 126 | .idea/**/sqlDataSources.xml 127 | .idea/**/dynamic.xml 128 | .idea/**/uiDesigner.xml 129 | .idea/**/dbnavigator.xml 130 | 131 | # Gradle 132 | .idea/**/gradle.xml 133 | .idea/**/libraries 134 | 135 | # Gradle and Maven with auto-import 136 | # When using Gradle or Maven with auto-import, you should exclude module files, 137 | # since they will be recreated, and may cause churn. Uncomment if using 138 | # auto-import. 139 | # .idea/modules.xml 140 | # .idea/*.iml 141 | # .idea/modules 142 | # *.iml 143 | # *.ipr 144 | 145 | # CMake 146 | cmake-build-*/ 147 | 148 | # Mongo Explorer plugin 149 | .idea/**/mongoSettings.xml 150 | 151 | # File-based project format 152 | *.iws 153 | 154 | # IntelliJ 155 | out/ 156 | 157 | # mpeltonen/sbt-idea plugin 158 | .idea_modules/ 159 | 160 | # JIRA plugin 161 | atlassian-ide-plugin.xml 162 | 163 | # Cursive Clojure plugin 164 | .idea/replstate.xml 165 | 166 | # Crashlytics plugin (for Android Studio and IntelliJ) 167 | com_crashlytics_export_strings.xml 168 | crashlytics.properties 169 | crashlytics-build.properties 170 | fabric.properties 171 | 172 | # Editor-based Rest Client 173 | .idea/httpRequests 174 | 175 | # Android studio 3.1+ serialized cache file 176 | .idea/caches/build_file_checksums.ser 177 | 178 | # General 179 | .DS_Store 180 | .AppleDouble 181 | .LSOverride 182 | 183 | # Icon must end with two \r 184 | Icon 185 | 186 | 187 | # Thumbnails 188 | ._* 189 | 190 | # Files that might appear in the root of a volume 191 | .DocumentRevisions-V100 192 | .fseventsd 193 | .Spotlight-V100 194 | .TemporaryItems 195 | .Trashes 196 | .VolumeIcon.icns 197 | .com.apple.timemachine.donotpresent 198 | 199 | # Directories potentially created on remote AFP share 200 | .AppleDB 201 | .AppleDesktop 202 | Network Trash Folder 203 | Temporary Items 204 | .apdisk 205 | 206 | # Windows thumbnail cache files 207 | Thumbs.db 208 | Thumbs.db:encryptable 209 | ehthumbs.db 210 | ehthumbs_vista.db 211 | 212 | # Dump file 213 | *.stackdump 214 | 215 | # Folder config file 216 | [Dd]esktop.ini 217 | 218 | # Recycle Bin used on file shares 219 | $RECYCLE.BIN/ 220 | 221 | # Windows Installer files 222 | *.cab 223 | *.msi 224 | *.msix 225 | *.msm 226 | *.msp 227 | 228 | # Windows shortcuts 229 | *.lnk 230 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2021 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | ...require("gts/.prettierrc.json"), 19 | }; 20 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | extends: "@googlemaps/semantic-release-config" 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## [1.2.0](https://github.com/googlemaps/react-wrapper/compare/v1.1.42...v1.2.0) (2025-03-28) 4 | 5 | 6 | ### Miscellaneous Chores 7 | 8 | * trigger release-please ([#858](https://github.com/googlemaps/react-wrapper/issues/858)) ([943f938](https://github.com/googlemaps/react-wrapper/commit/943f9386871d5cb9675f01bd18b0c043c4796493)) 9 | 10 | ## [1.1.42](https://github.com/googlemaps/react-wrapper/compare/v1.1.41...v1.1.42) (2024-07-25) 11 | 12 | 13 | ### Bug Fixes 14 | 15 | * trigger release-please ([9abc212](https://github.com/googlemaps/react-wrapper/commit/9abc212e4950de8ada11cb6d6f260306828c33ec)) 16 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to become a contributor and submit your own code 2 | 3 | **Table of contents** 4 | 5 | * [Contributor License Agreements](#contributor-license-agreements) 6 | * [Contributing a patch](#contributing-a-patch) 7 | * [Running the tests](#running-the-tests) 8 | * [Releasing the library](#releasing-the-library) 9 | 10 | ## Contributor License Agreements 11 | 12 | We'd love to accept your sample apps and patches! Before we can take them, we 13 | have to jump a couple of legal hurdles. 14 | 15 | Please fill out either the individual or corporate Contributor License Agreement 16 | (CLA). 17 | 18 | * If you are an individual writing original source code and you're sure you 19 | own the intellectual property, then you'll need to sign an [individual CLA](https://developers.google.com/open-source/cla/individual). 20 | * If you work for a company that wants to allow you to contribute your work, 21 | then you'll need to sign a [corporate CLA](https://developers.google.com/open-source/cla/corporate). 22 | 23 | Follow either of the two links above to access the appropriate CLA and 24 | instructions for how to sign and return it. Once we receive it, we'll be able to 25 | accept your pull requests. 26 | 27 | ## Contributing A Patch 28 | 29 | 1. Submit an issue describing your proposed change to the repo in question. 30 | 1. The repo owner will respond to your issue promptly. 31 | 1. If your proposed change is accepted, and you haven't already done so, sign a 32 | Contributor License Agreement (see details above). 33 | 1. Fork the desired repo, develop and test your code changes. 34 | 1. Ensure that your code adheres to the existing style in the code to which 35 | you are contributing. 36 | 1. Ensure that your code has an appropriate set of tests which all pass. 37 | 1. Title your pull request following [Conventional Commits](https://www.conventionalcommits.org/) styling. 38 | 1. Submit a pull request. 39 | 40 | ## Running the tests 41 | 42 | 1. [Prepare your environment for Node.js setup][setup]. 43 | 44 | 1. Install dependencies: 45 | 46 | npm install 47 | 48 | 1. Run the tests: 49 | 50 | # Run unit tests. 51 | npm test 52 | 53 | # Run lint check. 54 | npm run lint 55 | 56 | 1. Lint (and maybe fix) any changes: 57 | 58 | npm run format 59 | 60 | [setup]: https://cloud.google.com/nodejs/docs/setup -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Google Maps JavaScript API React Wrapper 2 | 3 | [![npm](https://img.shields.io/npm/v/@googlemaps/react-wrapper)](https://www.npmjs.com/package/@googlemaps/react-wrapper) 4 | ![Build](https://github.com/googlemaps/react-wrapper/workflows/Test/badge.svg) 5 | ![Release](https://github.com/googlemaps/react-wrapper/workflows/Release/badge.svg) 6 | [![codecov](https://codecov.io/gh/googlemaps/react-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/googlemaps/react-wrapper) 7 | ![GitHub contributors](https://img.shields.io/github/contributors/googlemaps/react-wrapper?color=green) 8 | [![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) 9 | [![](https://github.com/jpoehnelt/in-solidarity-bot/raw/main/static//badge-flat-square.png)](https://github.com/apps/in-solidarity) 10 | 11 | > [!IMPORTANT] 12 | > This library has been archived. 13 | > We recommend all users of this package to switch to the new 14 | > [`@vis.gl/react-google-maps`](https://www.npmjs.com/package/@vis.gl/react-google-maps), 15 | > which provides a collection of components and hooks and can be configured 16 | > to be fully compatible with this package. 17 | > 18 | > See [the migration guide](https://visgl.github.io/react-google-maps/docs/guides/migrating-from-react-wrapper) 19 | > for more details on how to switch from this package to `@vis.gl/react-google-maps`. 20 | 21 | ## Description 22 | 23 | Wrap React components with this library to load the Google Maps JavaScript API. 24 | 25 | ```jsx 26 | import {Wrapper} from '@googlemaps/react-wrapper'; 27 | 28 | const MyApp = () => ( 29 | 30 | 31 | 32 | ); 33 | ``` 34 | 35 | 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. 36 | 37 | ```jsx 38 | import {Wrapper, Status} from '@googlemaps/react-wrapper'; 39 | 40 | const render = status => { 41 | switch (status) { 42 | case Status.LOADING: 43 | return ; 44 | case Status.FAILURE: 45 | return ; 46 | case Status.SUCCESS: 47 | return ; 48 | } 49 | }; 50 | 51 | const MyApp = () => ; 52 | ``` 53 | 54 | When combining children and render props, the children will render on success and the render prop will be executed for other status values. 55 | 56 | ```tsx 57 | import {Wrapper, Status} from '@googlemaps/react-wrapper'; 58 | 59 | const render = (status: Status): ReactElement => { 60 | if (status === Status.FAILURE) return ; 61 | return ; 62 | }; 63 | 64 | const MyApp = () => ( 65 | 66 | 67 | 68 | ); 69 | ``` 70 | 71 | ### @googlemaps/js-api-loader 72 | 73 | This 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. 74 | 75 | ### MyMapComponent 76 | 77 | The following snippets demonstrates the usage of `useRef` and `useEffect` hooks with Google Maps. 78 | 79 | ```tsx 80 | function MyMapComponent({ 81 | center, 82 | zoom, 83 | }: { 84 | center: google.maps.LatLngLiteral; 85 | zoom: number; 86 | }) { 87 | const ref = useRef(); 88 | const [map, setMap] = useState(null); 89 | 90 | useEffect(() => { 91 | const map = new google.maps.Map(ref.current, {center, zoom}); 92 | setMap(map); 93 | 94 | return () => { 95 | google.maps.event.clearInstanceListeners(map); 96 | setMap(null); 97 | }; 98 | }, []); 99 | 100 | useEffect(() => { 101 | if (!map) return; 102 | 103 | // do something with the map instance 104 | }, [map]); 105 | 106 | return
; 107 | } 108 | ``` 109 | 110 | ## Examples 111 | 112 | See the [examples](https://github.com/googlemaps/react-wrapper/tree/main/examples) folder for additional usage patterns. 113 | 114 | - [Basic Demo](https://googlemaps.github.io/react-wrapper/public/basic/) 115 | 116 | ## Install 117 | 118 | Available via npm as the package [@googlemaps/react-wrapper](https://www.npmjs.com/package/@googlemaps/react-wrapper). 119 | 120 | ```sh 121 | npm i @googlemaps/react-wrapper 122 | ``` 123 | 124 | or 125 | 126 | ```sh 127 | yarn add @googlemaps/react-wrapper 128 | ``` 129 | 130 | For TypeScript support additionally install type definitions. 131 | 132 | ```sh 133 | npm i -D @types/google.maps 134 | ``` 135 | 136 | or 137 | 138 | ```sh 139 | yarn add -D @types/google.maps 140 | ``` 141 | 142 | ## Documentation 143 | 144 | The reference documentation can be found at this [link](https://googlemaps.github.io/react-wrapper/index.html). 145 | 146 | ## Support 147 | 148 | This library is community supported. We're comfortable enough with the stability and features of 149 | the library that we want you to build real production applications on it. 150 | 151 | If you find a bug, or have a feature suggestion, please [log an issue][issues]. If you'd like to 152 | contribute, please read [How to Contribute][contrib]. 153 | 154 | [issues]: https://github.com/googlemaps/react-wrapper/issues 155 | [contrib]: https://github.com/googlemaps/react-wrapper/blob/master/CONTRIBUTING.md 156 | [js_api_loader]: https://www.npmjs.com/package/@googlemaps/js-api-loader 157 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Report a security issue 2 | 3 | To report a security issue, please use https://g.co/vulnz. We use 4 | https://g.co/vulnz for our intake, and do coordination and disclosure here on 5 | GitHub (including using GitHub Security Advisory). The Google Security Team will 6 | respond within 5 working days of your report on g.co/vulnz. 7 | 8 | To contact us about other bugs, please open an issue on GitHub. 9 | 10 | > **Note**: This file is synchronized from the https://github.com/googlemaps/.github repository. 11 | -------------------------------------------------------------------------------- /examples/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2021 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | import React, { useEffect, useRef, ReactElement } from "react"; 17 | import { createRoot } from "react-dom/client"; 18 | 19 | import { Wrapper, Status } from "../src"; 20 | 21 | const render = (status: Status): ReactElement => { 22 | if (status === Status.LOADING) return

{status} ..

; 23 | if (status === Status.FAILURE) return

{status} ...

; 24 | return null; 25 | }; 26 | 27 | function MyMapComponent({ 28 | center, 29 | zoom, 30 | }: { 31 | center: google.maps.LatLngLiteral; 32 | zoom: number; 33 | }) { 34 | const ref = useRef(null); 35 | 36 | useEffect(() => { 37 | new window.google.maps.Map(ref.current, { 38 | center, 39 | zoom, 40 | }); 41 | }); 42 | 43 | return
; 44 | } 45 | 46 | function App() { 47 | const center = { lat: -34.397, lng: 150.644 }; 48 | const zoom = 4; 49 | 50 | return ( 51 | 52 | 53 | 54 | ); 55 | } 56 | 57 | const container = document.getElementById("root") as HTMLElement; 58 | const root = createRoot(container); 59 | root.render(); 60 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | roots: [''], 19 | preset: 'ts-jest', 20 | testEnvironment: 'jsdom', 21 | testPathIgnorePatterns: ['/node_modules/', '/dist/', '/__utils__/'], 22 | // collectCoverage: true, 23 | coverageThreshold: { 24 | global: { 25 | branches: 100, 26 | functions: 100, 27 | lines: 100, 28 | statements: 100, 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@googlemaps/react-wrapper", 3 | "version": "1.2.0", 4 | "description": "React component that wraps the loading of Google Maps JavaScript API.", 5 | "keywords": [ 6 | "google", 7 | "maps", 8 | "react" 9 | ], 10 | "homepage": "https://github.com/googlemaps/react-wrapper", 11 | "bugs": { 12 | "url": "https://github.com/googlemaps/react-wrapper/issues" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/googlemaps/react-wrapper.git" 17 | }, 18 | "license": "Apache-2.0", 19 | "author": "Justin Poehnelt", 20 | "main": "dist/index.cjs.js", 21 | "module": "dist/index.esm.js", 22 | "browser": "dist/index.umd.js", 23 | "types": "dist/src/index.d.ts", 24 | "files": [ 25 | "dist", 26 | "src" 27 | ], 28 | "scripts": { 29 | "build": "rm -rf dist && rollup -c && npm run build:examples", 30 | "build:examples": "rm -rf public && rollup -c rollup.config.examples.js", 31 | "docs": "typedoc src/index.tsx && npm run build:examples && cp -r public docs/public", 32 | "format": "prettier *config.json *.js src/* --write && eslint src/* --fix", 33 | "lint": "gts check src/*", 34 | "prepare": "rollup -c", 35 | "test": "jest -i src/*", 36 | "test:e2e": "jest e2e/*" 37 | }, 38 | "dependencies": { 39 | "@googlemaps/js-api-loader": "^1.16.6" 40 | }, 41 | "devDependencies": { 42 | "@babel/preset-react": "^7.14.5", 43 | "@rollup/plugin-babel": "^6.0.0", 44 | "@rollup/plugin-commonjs": "^26.0.1", 45 | "@rollup/plugin-html": "^1.0.0", 46 | "@rollup/plugin-node-resolve": "^15.0.0", 47 | "@rollup/plugin-replace": "^5.0.0", 48 | "@rollup/plugin-typescript": "^11.0.0", 49 | "@testing-library/dom": "^10.0.0", 50 | "@testing-library/jest-dom": "^6.4.2", 51 | "@testing-library/react": "^16.0.0", 52 | "@types/google.maps": "^3.45.6", 53 | "@types/jest": "^29.5.12", 54 | "@types/react": "^19.0.12", 55 | "@types/react-dom": "^19.0.4", 56 | "eslint-plugin-jest": "^28.2.0", 57 | "eslint-plugin-react": "^7.22.0", 58 | "gts": "^6.0.2", 59 | "jest": "^29.7.0", 60 | "jest-environment-jsdom": "^29.7.0", 61 | "prettier": "^3.2.5", 62 | "react": "^19.0.0", 63 | "react-dom": "^19.0.0", 64 | "rollup": "^2.40.0", 65 | "rollup-plugin-filesize": "^10.0.0", 66 | "rollup-plugin-terser": "^7.0.2", 67 | "ts-jest": "^29.1.2", 68 | "tslib": "^2.1.0", 69 | "typedoc": "^0.28.1", 70 | "typescript": "^5.8.2" 71 | }, 72 | "peerDependencies": { 73 | "react": ">=16.8.0" 74 | }, 75 | "publishConfig": { 76 | "access": "public", 77 | "registry": "https://wombat-dressing-room.appspot.com" 78 | }, 79 | "prettier": { 80 | "trailingComma": "es5" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /rollup.config.examples.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2021 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import html, {makeHtmlAttributes} from '@rollup/plugin-html'; 18 | import babel from '@rollup/plugin-babel'; 19 | import commonjs from '@rollup/plugin-commonjs'; 20 | import typescript from '@rollup/plugin-typescript'; 21 | import fs from 'fs'; 22 | import {nodeResolve} from '@rollup/plugin-node-resolve'; 23 | import path from 'path'; 24 | import replace from '@rollup/plugin-replace'; 25 | 26 | const template = ({attributes, files, meta, publicPath, title}) => { 27 | const scripts = (files.js || []) 28 | .map(({fileName}) => { 29 | const attrs = makeHtmlAttributes(attributes.script); 30 | return ``; 31 | }) 32 | .join('\n'); 33 | 34 | const links = (files.css || []) 35 | .map(({fileName}) => { 36 | const attrs = makeHtmlAttributes(attributes.link); 37 | return ``; 38 | }) 39 | .join('\n'); 40 | 41 | const metas = meta 42 | .map(input => { 43 | const attrs = makeHtmlAttributes(input); 44 | return ``; 45 | }) 46 | .join('\n'); 47 | 48 | return ` 49 | 50 | 51 | 52 | ${metas} 53 | ${title} 54 | 61 | ${links} 62 | 63 | 64 |
65 | ${scripts} 66 | 67 | `; 68 | }; 69 | 70 | const typescriptOptions = { 71 | tsconfig: 'tsconfig.examples.json', 72 | }; 73 | 74 | const examples = fs 75 | .readdirSync(path.join(__dirname, 'examples')) 76 | .filter(f => f !== 'config.ts') 77 | .map(f => f.slice(0, f.length - 4)); 78 | 79 | export default examples.map(name => ({ 80 | input: `examples/${name}.tsx`, 81 | plugins: [ 82 | typescript(typescriptOptions), 83 | replace({ 84 | preventAssignment: true, 85 | 'process.env.NODE_ENV': JSON.stringify('development'), 86 | }), 87 | babel({ 88 | presets: ['@babel/preset-react'], 89 | babelHelpers: 'bundled', 90 | }), 91 | commonjs(), 92 | nodeResolve(), 93 | ], 94 | output: { 95 | dir: `public/${name}`, 96 | sourcemap: false, 97 | plugins: [ 98 | html({ 99 | fileName: `index.html`, 100 | title: `@googlemaps/react-wrapper: ${name}`, 101 | template, 102 | }), 103 | ], 104 | manualChunks: id => { 105 | if (id.includes('node_modules')) { 106 | return 'vendor'; 107 | } 108 | }, 109 | }, 110 | })); 111 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | import commonjs from '@rollup/plugin-commonjs'; 17 | import filesize from 'rollup-plugin-filesize'; 18 | import typescript from '@rollup/plugin-typescript'; 19 | import resolve from '@rollup/plugin-node-resolve'; 20 | 21 | import pkg from './package.json'; 22 | 23 | const INPUT_FILE_PATH = 'src/index.tsx'; 24 | const OUTPUT_NAME = 'Loader'; 25 | 26 | const GLOBALS = { 27 | react: 'React', 28 | '@googlemaps/js-api-loader': 'google.maps.plugins.loader', 29 | }; 30 | 31 | const PLUGINS = [ 32 | typescript({tsconfig: './tsconfig.json', declarationDir: './'}), 33 | resolve({ 34 | browser: true, 35 | resolveOnly: [/^(?!react$)/], 36 | }), 37 | commonjs(), 38 | filesize(), 39 | ]; 40 | 41 | const EXTERNAL = ['react', '@googlemaps/js-api-loader']; 42 | 43 | const OUTPUT_DATA = [ 44 | { 45 | file: pkg.browser, 46 | format: 'umd', 47 | }, 48 | { 49 | file: pkg.main, 50 | format: 'cjs', 51 | }, 52 | { 53 | file: pkg.module, 54 | format: 'es', 55 | }, 56 | ]; 57 | 58 | const config = OUTPUT_DATA.map(({file, format}) => ({ 59 | input: INPUT_FILE_PATH, 60 | output: { 61 | file, 62 | format, 63 | name: OUTPUT_NAME, 64 | globals: GLOBALS, 65 | sourcemap: false, // https://github.com/googlemaps/react-wrapper/issues/340 66 | }, 67 | external: EXTERNAL, 68 | plugins: PLUGINS, 69 | })); 70 | 71 | export default config; 72 | -------------------------------------------------------------------------------- /src/index.test.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2021 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at. 7 | * 8 | * Http://www.apache.org/licenses/LICENSE-2.0. 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import React from "react"; 18 | import { act, render } from "@testing-library/react"; 19 | import "@testing-library/jest-dom"; 20 | 21 | import { Status, Wrapper } from "./index"; 22 | import type { LoaderOptions } from "@googlemaps/js-api-loader"; 23 | 24 | // set up partial mock of @googlemaps/js-api-loader being used for the tests 25 | // helper to control the promise returned by Loader.load 26 | class Deferred { 27 | public promise: Promise; 28 | public resolve: (value: PromiseLike | T) => void; 29 | public reject: (reason?: unknown) => void; 30 | 31 | constructor() { 32 | this.promise = new Promise((resolve, reject) => { 33 | this.resolve = resolve; 34 | this.reject = reject; 35 | }); 36 | } 37 | } 38 | 39 | let loaderDeferred = new Deferred(); 40 | const loaderSpy = jest.fn(); 41 | const loadMock = jest.fn(); 42 | 43 | jest.mock("@googlemaps/js-api-loader", () => { 44 | // this is the only part of the @googlemaps/js-api-loader api 45 | // surface being used in the wrapper class. 46 | class Loader { 47 | constructor(options: LoaderOptions) { 48 | loaderSpy(options); 49 | } 50 | 51 | public async load() { 52 | return loadMock(); 53 | } 54 | } 55 | 56 | return { Loader }; 57 | }); 58 | 59 | beforeEach(() => { 60 | jest.resetAllMocks(); 61 | 62 | loaderDeferred = new Deferred(); 63 | loadMock.mockReturnValue(loaderDeferred.promise); 64 | }); 65 | 66 | afterEach(() => { 67 | // clean up jsdom 68 | document.documentElement.innerHTML = ""; 69 | }); 70 | 71 | test("it should render children after load", async () => { 72 | const { container, findByText } = render( 73 | TEST CONTENT 74 | ); 75 | 76 | expect(container).toBeEmptyDOMElement(); 77 | 78 | await act(async () => { 79 | // actual return value isn't needed here, since the wrapper doesn't 80 | // interact with the maps API object that would normally be returned 81 | loaderDeferred.resolve({}); 82 | }); 83 | 84 | expect(await findByText("TEST CONTENT")).toBeVisible(); 85 | }); 86 | 87 | test("it should not render children after error", async () => { 88 | const { queryByText } = render( 89 | TEST CONTENT 90 | ); 91 | 92 | await act(async () => { 93 | loaderDeferred.reject(new Error("some loader error")); 94 | }); 95 | 96 | expect(queryByText("TEST CONTENT")).toBeNull(); 97 | }); 98 | 99 | test("it should use render prop on success when there are no children", async () => { 100 | const { findByTestId } = render( 101 |
{status}
} 104 | > 105 | ); 106 | 107 | expect(await findByTestId("loader-status")).toHaveTextContent(Status.LOADING); 108 | 109 | await act(async () => { 110 | loaderDeferred.resolve({}); 111 | }); 112 | 113 | expect(await findByTestId("loader-status")).toHaveTextContent(Status.SUCCESS); 114 | }); 115 | 116 | test("it should use render prop on failure", async () => { 117 | const { findByTestId } = render( 118 |
{status}
} 121 | > 122 | ); 123 | 124 | await act(async () => { 125 | loaderDeferred.reject(new Error("some error")); 126 | }); 127 | 128 | expect(await findByTestId("loader-status")).toHaveTextContent(Status.FAILURE); 129 | }); 130 | 131 | test("it should use children on success when children and render prop are specified", async () => { 132 | const { findByTestId, queryByTestId } = render( 133 |
{status}
} 136 | > 137 |
TEST CONTENT
138 | 139 | ); 140 | 141 | expect(await findByTestId("loader-status")).toHaveTextContent(Status.LOADING); 142 | 143 | await act(async () => { 144 | loaderDeferred.resolve({}); 145 | }); 146 | 147 | expect(await findByTestId("content")).toHaveTextContent("TEST CONTENT"); 148 | expect(queryByTestId("loader-status")).toBeNull(); 149 | }); 150 | 151 | test("it should render multiple wrapper elements", async () => { 152 | const { findByTestId } = render( 153 | <> 154 |
{status}
} 157 | > 158 |
TEST CONTENT 1
159 | 160 | 161 |
{status}
} 164 | > 165 |
TEST CONTENT 2
166 | 167 | 168 | ); 169 | 170 | expect(await findByTestId("loader1-status")).toHaveTextContent( 171 | Status.LOADING 172 | ); 173 | expect(await findByTestId("loader2-status")).toHaveTextContent( 174 | Status.LOADING 175 | ); 176 | 177 | await act(async () => { 178 | loaderDeferred.resolve({}); 179 | }); 180 | 181 | expect(await findByTestId("content1")).toHaveTextContent("TEST CONTENT 1"); 182 | expect(await findByTestId("content2")).toHaveTextContent("TEST CONTENT 2"); 183 | 184 | expect(loaderSpy).toHaveBeenCalledTimes(2); 185 | }); 186 | 187 | test("it should pass props to Loader", async () => { 188 | render(); 189 | 190 | expect(loaderSpy).toHaveBeenCalledWith({ 191 | apiKey: "YOUR_API_KEY", 192 | libraries: ["maps", "places"], 193 | }); 194 | }); 195 | 196 | test("it should execute the callback", async () => { 197 | // eslint-disable-next-line @typescript-eslint/no-require-imports 198 | const { Loader: LoaderMock } = require("@googlemaps/js-api-loader"); 199 | const callback = jest.fn(); 200 | 201 | render(); 202 | 203 | expect(callback.mock.calls[0][0]).toBe(Status.LOADING); 204 | expect(callback.mock.calls[0][1]).toBeInstanceOf(LoaderMock); 205 | 206 | await act(async () => { 207 | loaderDeferred.resolve({}); 208 | }); 209 | 210 | expect(callback.mock.calls[1][0]).toBe(Status.SUCCESS); 211 | expect(callback.mock.calls[1][1]).toBeInstanceOf(LoaderMock); 212 | 213 | expect(callback).toHaveBeenCalledTimes(2); 214 | }); 215 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2021 Google LLC. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at. 7 | * 8 | * Http://www.apache.org/licenses/LICENSE-2.0. 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | import { Loader, LoaderOptions } from "@googlemaps/js-api-loader"; 18 | import React, { ReactElement, ReactNode, useEffect, useState } from "react"; 19 | 20 | export enum Status { 21 | LOADING = "LOADING", 22 | FAILURE = "FAILURE", 23 | SUCCESS = "SUCCESS", 24 | } 25 | 26 | /** 27 | * The `WrapperProps` interface extends the `LoaderOptions` interface from 28 | * [@googlemaps/js-api-loader](https://npmjs.com/package/@googlemaps/js-api-loader). 29 | * See the reference documentation for 30 | * [LoaderOptions](https://googlemaps.github.io/js-api-loader/interfaces/LoaderOptions.html) 31 | * for a complete list of all props that are available. 32 | */ 33 | export interface WrapperProps extends LoaderOptions { 34 | /** 35 | * Children wrapped by the `{elements} ReactElement; 42 | /** 43 | * Callback prop used to access `@googlemaps/js-api-loader` and `Status`. 44 | * 45 | * Note: The callback be executed multiple times in the lifecycle of the component. 46 | */ 47 | callback?: (status: Status, loader: Loader) => void; 48 | } 49 | 50 | /** 51 | * A component to wrap the loading of the Google Maps JavaScript API. 52 | * 53 | * ``` 54 | * import { Wrapper } from '@googlemaps/react-wrapper'; 55 | * 56 | * const MyApp = () => ( 57 | * 58 | * 59 | * 60 | * ); 61 | * ``` 62 | * 63 | * @param props 64 | */ 65 | export const Wrapper = ({ 66 | children, 67 | render, 68 | callback, 69 | ...options 70 | }: WrapperProps): ReactElement => { 71 | const [status, setStatus] = useState(Status.LOADING); 72 | 73 | useEffect(() => { 74 | const loader = new Loader(options); 75 | 76 | const setStatusAndExecuteCallback = (status: Status) => { 77 | if (callback) callback(status, loader); 78 | setStatus(status); 79 | }; 80 | 81 | setStatusAndExecuteCallback(Status.LOADING); 82 | 83 | loader.load().then( 84 | () => setStatusAndExecuteCallback(Status.SUCCESS), 85 | () => setStatusAndExecuteCallback(Status.FAILURE) 86 | ); 87 | }, []); 88 | 89 | if (status === Status.SUCCESS && children) return <>{children}; 90 | 91 | if (render) return render(status); 92 | 93 | return <>; 94 | }; 95 | -------------------------------------------------------------------------------- /tsconfig.examples.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "declaration": false, 5 | "noEmit": true, 6 | "outDir": null, 7 | "declarationDir": null, 8 | "noImplicitAny": false, 9 | "sourceMap": false, 10 | "resolveJsonModule": true, 11 | }, 12 | "include": ["src/**/*", "examples/**/*"] 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "declarationDir": "./dist", 5 | "noImplicitAny": true, 6 | "outDir": "./dist", 7 | "sourceMap": true, 8 | "esModuleInterop": true, 9 | "lib": ["DOM", "ESNext"], 10 | "target": "ESNext", 11 | "moduleResolution": "node", 12 | "jsx": "react" 13 | }, 14 | "include": [ 15 | "src/**/*.ts", 16 | "src/index.tsx", 17 | "src/index.test.tsx", 18 | "examples/**/*.tsx" 19 | ], 20 | "exclude": ["node_modules", "./dist"] 21 | } 22 | -------------------------------------------------------------------------------- /typedoc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2020 Google LLC 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | 17 | module.exports = { 18 | out: 'docs', 19 | exclude: [ 20 | '**/node_modules/**', 21 | '**/*.spec.ts', 22 | '**/*.test.ts', 23 | '**/*.test.tsx', 24 | ], 25 | name: '@googlemaps/react-wrapper', 26 | excludePrivate: true, 27 | }; 28 | --------------------------------------------------------------------------------