feat: Adds support for React projects.

samples/react-docs.sh

@@ -0,0 +1,33 @@
+#!/bin/bash
+
+# Copy/generate files for doc snippets.
+
+echo ">>>Running react-docs.sh"
+
+# Copy static documentation files as part of the build process.
+NAME=$1 # The name of the folder, taken from package.json "build" line.
+
+# /Users/[USERNAME]/git/js-api-samples/samples
+
+SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )" # Script directory (/samples)
+PROJECT_ROOT=$(dirname "$SCRIPT_DIR")  # Get the parent directory (js-api-samples)
+DIST_DIR="${PROJECT_ROOT}/dist"
+SAMPLE_DIR="${PROJECT_ROOT}/dist/samples/${NAME}"
+
+echo "PROJECT_ROOT: ${PROJECT_ROOT}"
+
+DOCS_DIR="${PROJECT_ROOT}/dist/samples/${NAME}/docs"
+
+# Create two new folders.
+mkdir -p ${DOCS_DIR}/src
+
+# Copy files
+cp "${SCRIPT_DIR}/${NAME}/src/app.js" "${DOCS_DIR}/src/app.js"
+cp "${SCRIPT_DIR}/${NAME}/src/app.tsx" "${DOCS_DIR}/src/app.tsx"
+cp "${SCRIPT_DIR}/${NAME}/src/styles.css" "${DOCS_DIR}/src/styles.css"
+cp "${SCRIPT_DIR}/${NAME}/index.html" "${DOCS_DIR}/index.html"
+
+# Copy the data folder if one is found.
+if [ -d "public" ] && [ "$(ls -A public)" ]; then
+  cp -r public/* "${DOCS_DIR}/"
+fi

samples/react-ui-kit-place-details-compact/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-compact && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-compact",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-place-details-compact/src/app.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-// [START maps_react_ui_kit_place_details_compact]
+{/* [START maps_react_ui_kit_place_details_compact] */}
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
@@ -84,5 +84,5 @@ export function renderToDom(container: HTMLElement) {
     </React.StrictMode>
   );
 }
-// [END maps_react_ui_kit_place_details_compact]
+{/* [END maps_react_ui_kit_place_details_compact] */}
 

samples/react-ui-kit-place-details-latlng-compact/package.json

@@ -1,11 +1,13 @@
 {
-  "name": "@js-api-samples/react-ui-kit-place-details-by-latlng-compact",
+  "name": "@js-api-samples/react-ui-kit-place-details-latlng-compact",
   "version": "1.0.0",
   "type": "module",
+
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-latlng-compact && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-latlng-compact",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-place-details-latlng-compact/src/app.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-// [START maps_react_ui_kit_place_details_by_latlng_compact]
+{/* [START maps_react_ui_kit_place_details_latlng_compact] */}
 import React, {useEffect, useRef} from 'react';
 import {createRoot} from 'react-dom/client';
 import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
@@ -85,4 +85,4 @@ export function renderToDom(container: HTMLElement) {
     </React.StrictMode>
   );
 }
-// [END maps_react_ui_kit_place_details_by_latlng_compact]
+{/* [END maps_react_ui_kit_place_details_latlng_compact] */}

samples/react-ui-kit-place-details-latlng/package.json

@@ -1,11 +1,13 @@
 {
-  "name": "@js-api-samples/react-ui-kit-place-details-by-latlng",
+  "name": "@js-api-samples/react-ui-kit-place-details-latlng",
   "version": "1.0.0",
   "type": "module",
+
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details-latlng && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details-latlng",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-place-details-latlng/src/app.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-// [START maps_react_ui_kit_place_details_by_latlng]
+{/* [START maps_react_ui_kit_place_details_by_latlng] */}
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
@@ -91,4 +91,4 @@ export function renderToDom(container: HTMLElement) {
     </React.StrictMode>
   );
 }
-// [END maps_react_ui_kit_place_details_by_latlng]
+{/* [END maps_react_ui_kit_place_details_by_latlng] */}

samples/react-ui-kit-place-details/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-place-details && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-place-details",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-place-details/src/app.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-// [START maps_react_ui_kit_place_details]
+{/* [START maps_react_ui_kit_place_details] */}
 import React from 'react';
 import {createRoot} from 'react-dom/client';
 import {APIProvider, useMapsLibrary} from '@vis.gl/react-google-maps';
@@ -90,5 +90,5 @@ export function renderToDom(container: HTMLElement) {
     </React.StrictMode>
   );
 }
-// [END maps_react_ui_kit_place_details]
 
+{/* [END maps_react_ui_kit_place_details] */}

samples/react-ui-kit-place-details/tsconfig.json

@@ -17,6 +17,7 @@
       "types": [
         "vite/client",
         "node"
-      ]
+      ],
+      "removeComments": false,
     }
   }

samples/react-ui-kit-search-nearby/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-search-nearby && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-search-nearby",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-search-nearby/src/app.tsx

@@ -1,4 +1,9 @@
-// [START maps_react_places_ui_kit_search_nearby]
+/*
+ * @license
+ * Copyright 2025 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+{/* [START maps_react_places_ui_kit_search_nearby] */}
 import React, {useState, useEffect, useRef, type RefObject} from 'react';
 import {createRoot} from 'react-dom/client';
 import {
@@ -71,7 +76,7 @@ const PlacesSearchLayout = () => {
 };
 
 interface PlaceSearchControllerProps {
-    placeSearchRef: RefObject<HTMLDivElement>;
+    placeSearchRef: RefObject<HTMLDivElement | null>;
     selectedType: string;
     setPlaces: (places: any[]) => void;
     setSelectedPlace: (place: any | null) => void;
@@ -204,4 +209,4 @@ root.render(
     <App />
   </React.StrictMode>
 );
-// [END maps_react_places_ui_kit_search_nearby]
+{/* [END maps_react_places_ui_kit_search_nearby] */}

samples/react-ui-kit-search-text/package.json

@@ -3,9 +3,10 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
-    "build": "tsc && vite build",
-    "test": "tsc",
+    "build": "tsc && bash ../react-docs.sh react-ui-kit-search-text && npm run build:vite --workspace=. && bash ../dist.sh react-ui-kit-search-text",
+    "test": "tsc && npm run build:vite --workspace=.",
+    "start": "tsc && vite build --base './' && vite",
+    "build:vite": "vite build --base './'",
     "preview": "vite preview"
   },
   "dependencies": {

samples/react-ui-kit-search-text/src/app.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Google LLC. All Rights Reserved.
  * SPDX-License-Identifier: Apache-2.0
  */
-// [START maps_react_places_ui_kit_search_text]
+{/* [START maps_react_places_ui_kit_search_text] */}
 import React, {useState, useEffect, useRef, type RefObject} from 'react';
 import {createRoot} from 'react-dom/client';
 import {
@@ -82,7 +82,7 @@ const PlacesSearchLayout = () => {
 };
 
 interface PlaceSearchControllerProps {
-    placeSearchRef: RefObject<HTMLDivElement>;
+    placeSearchRef: RefObject<HTMLDivElement | null>;
     query: string;
     setPlaces: (places: any[]) => void;
     setSelectedPlace: (place: any | null) => void;
@@ -211,4 +211,4 @@ root.render(
     <App />
   </React.StrictMode>
 );
-// [END maps_react_places_ui_kit_search_text]
+{/* [END maps_react_places_ui_kit_search_text] */}