reactjs
diff --git a/‎src/content/reference/react-dom/browser.md‎
Lines changed: 140 additions & 1 deletion b/‎src/content/reference/react-dom/browser.md‎
Lines changed: 140 additions & 1 deletion
@@ -65,10 +65,16 @@ During server rendering, `use(browser())` stops rendering the component and leav
 
 ### Rendering content only in the browser {/*rendering-content-only-in-the-browser*/}
 
-Call `browser` inside `use` in a component that should only render in the browser:
+Call `browser` inside `use` in a component that should only render in the browser.
 
 You can use this instead of checking `typeof window`, waiting for an [`Effect`](/reference/react/useEffect) to set mounted state, or using a framework option to disable server rendering.
 
+<Recipes titleText="Examples of browser-only content">
+
+#### Loading a saved draft {/*loading-a-saved-draft*/}
+
+`localStorage` is only available in the browser. This example uses it to load and save a draft.
+
 Press **Render the page** to see the loading fallback. React then displays a draft loaded from `localStorage`.
 
 <Sandpack>
@@ -215,6 +221,139 @@ iframe {
 
 </Sandpack>
 
+<Solution />
+
+#### Detecting the user's time zone {/*detecting-the-users-time-zone*/}
+
+The browser can detect the user's time zone. This example waits for the browser before reading it.
+
+Press **Render the page** to see the loading fallback. React then displays the time zone detected by the browser.
+
+<Sandpack>
+
+```js src/App.js active
+import { Suspense, use } from 'react';
+import { browser } from 'react-dom';
+
+function TimeZone() {
+  use(browser("The user's time zone is detected in the browser."));
+  const timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
+  return <p>Your time zone: {timeZone}</p>;
+}
+
+export default function App() {
+  return (
+    <Suspense fallback={<p>Loading time zone...</p>}>
+      <TimeZone />
+    </Suspense>
+  );
+}
+```
+
+```js src/Document.js hidden
+import App from './App.js';
+
+export default function Document() {
+  return (
+    <html lang="en">
+      <head>
+        <title>Time zone</title>
+      </head>
+      <body>
+        <App />
+      </body>
+    </html>
+  );
+}
+```
+
+```js src/index.js hidden
+import { hydrateRoot } from 'react-dom/client';
+import { renderToReadableStream } from 'react-dom/server';
+import Document from './Document.js';
+import { flushReadableStreamToFrame } from './demo-helpers.js';
+import './styles.css';
+
+async function main(frame) {
+  const stream = await renderToReadableStream(<Document />);
+  await flushReadableStreamToFrame(stream, frame);
+
+  // Wait so both the fallback and hydrated content are visible.
+  await new Promise(resolve => setTimeout(resolve, 1200));
+  hydrateRoot(frame.contentDocument, <Document />);
+}
+
+const renderButton = document.getElementById('render');
+renderButton.addEventListener('click', () => {
+  renderButton.disabled = true;
+  main(document.getElementById('preview'));
+}, { once: true });
+```
+
+```js src/demo-helpers.js hidden
+export async function flushReadableStreamToFrame(readable, frame) {
+  const doc = frame.contentWindow.document;
+  const decoder = new TextDecoder();
+  const reader = readable.getReader();
+
+  while (true) {
+    const {done, value} = await reader.read();
+    if (done) {
+      break;
+    }
+    doc.write(decoder.decode(value, {stream: true}));
+  }
+
+  doc.write(decoder.decode());
+  doc.close();
+}
+```
+
+```html public/index.html hidden
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Browser-only rendering</title>
+</head>
+<body>
+  <button id="render">Render the page</button>
+  <br /><br />
+  <iframe id="preview" title="Rendered page"></iframe>
+</body>
+</html>
+```
+
+```css src/styles.css hidden
+iframe {
+  width: 100%;
+  height: 80px;
+  border: 0;
+}
+```
+
+```json package.json hidden
+{
+  "dependencies": {
+    "react": "19.3.0-canary-eb8feb71-20260814",
+    "react-dom": "19.3.0-canary-eb8feb71-20260814",
+    "react-scripts": "latest"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
+</Sandpack>
+
+<Solution />
+
+</Recipes>
+
 <Note>
 
 In a React Server Components app, `use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component: