0
# Document Components
1
2
Components for managing HTML document structure including meta tags, stylesheets, scripts, and scroll restoration functionality.
3
4
## Capabilities
5
6
### Meta
7
8
Renders meta tags in the document head based on route-level meta functions.
9
10
```typescript { .api }
11
/**
12
* Renders meta tags in the document head based on route-level meta functions
13
* Automatically collects and renders meta descriptors from all matched routes
14
* @returns React element containing meta tags
15
*/
16
function Meta(): ReactElement;
17
```
18
19
**Usage Example:**
20
21
```typescript
22
// In root.tsx layout
23
import { Meta } from "@remix-run/react";
24
25
export default function App() {
26
return (
27
<html>
28
<head>
29
<Meta />
30
<Links />
31
</head>
32
<body>{/* app content */}</body>
33
</html>
34
);
35
}
36
37
// In route file with meta function
38
export const meta: MetaFunction = () => {
39
return [
40
{ title: "My Page Title" },
41
{ name: "description", content: "Page description" },
42
{ property: "og:title", content: "Open Graph Title" },
43
];
44
};
45
```
46
47
### Links
48
49
Renders link tags in the document head based on route-level links functions and asset manifest.
50
51
```typescript { .api }
52
/**
53
* Renders link tags in the document head for stylesheets and other resources
54
* Automatically includes route-level links and critical CSS from asset manifest
55
* @returns React element containing link tags
56
*/
57
function Links(): ReactElement;
58
```
59
60
**Usage Example:**
61
62
```typescript
63
// In root.tsx layout
64
import { Links } from "@remix-run/react";
65
66
export default function App() {
67
return (
68
<html>
69
<head>
70
<Meta />
71
<Links />
72
</head>
73
<body>{/* app content */}</body>
74
</html>
75
);
76
}
77
78
// In route file with links function
79
export const links: LinksFunction = () => {
80
return [
81
{ rel: "stylesheet", href: "/styles/route.css" },
82
{ rel: "preload", href: "/fonts/font.woff2", as: "font", type: "font/woff2", crossOrigin: "anonymous" },
83
];
84
};
85
```
86
87
### Scripts
88
89
Renders script tags for the application including route modules and runtime scripts.
90
91
```typescript { .api }
92
/**
93
* Renders script tags for the application including route modules and runtime
94
* Handles module loading, hydration, and development features like live reload
95
* @param props - Optional script configuration
96
* @returns React element containing script tags
97
*/
98
function Scripts(props?: ScriptProps): ReactElement;
99
100
interface ScriptProps {
101
/** Nonce value for Content Security Policy */
102
nonce?: string;
103
/** Whether to suppress hydration warnings */
104
suppressHydrationWarning?: boolean;
105
}
106
```
107
108
**Usage Example:**
109
110
```typescript
111
// In root.tsx layout
112
import { Scripts } from "@remix-run/react";
113
114
export default function App() {
115
return (
116
<html>
117
<head>
118
<Meta />
119
<Links />
120
</head>
121
<body>
122
{/* app content */}
123
<Scripts nonce="csp-nonce-value" />
124
</body>
125
</html>
126
);
127
}
128
```
129
130
### ScrollRestoration
131
132
Manages browser scroll restoration behavior for client-side navigation.
133
134
```typescript { .api }
135
/**
136
* Emulates browser scroll restoration on location changes
137
* Manages scroll position during client-side navigation
138
* @param props - Scroll restoration configuration
139
* @returns React element containing scroll management script
140
*/
141
function ScrollRestoration(props?: ScrollRestorationProps): ReactElement;
142
143
interface ScrollRestorationProps extends ScriptProps {
144
/** Function to generate storage key for scroll position */
145
getKey?: (location: Location, matches: UIMatch[]) => string;
146
}
147
```
148
149
**Usage Example:**
150
151
```typescript
152
// In root.tsx layout
153
import { ScrollRestoration } from "@remix-run/react";
154
155
export default function App() {
156
return (
157
<html>
158
<head>
159
<Meta />
160
<Links />
161
</head>
162
<body>
163
{/* app content */}
164
<ScrollRestoration
165
getKey={(location, matches) => {
166
// Custom key generation logic
167
return location.pathname;
168
}}
169
/>
170
<Scripts />
171
</body>
172
</html>
173
);
174
}
175
```
176
177
### LiveReload
178
179
Development-only component that enables live browser reloading during development.
180
181
```typescript { .api }
182
/**
183
* Development-only component for live browser reloading
184
* Automatically removed in production builds
185
* @param props - Live reload configuration
186
* @returns React element containing live reload script (development only)
187
*/
188
function LiveReload(props?: LiveReloadProps): ReactElement | null;
189
190
interface LiveReloadProps {
191
/** Port number for the live reload server */
192
port?: number;
193
/** Timeout for reconnection attempts */
194
timeoutMs?: number;
195
/** Custom origin for the live reload server */
196
origin?: string;
197
/** Nonce value for Content Security Policy */
198
nonce?: string;
199
}
200
```
201
202
**Usage Example:**
203
204
```typescript
205
// In root.tsx layout
206
import { LiveReload } from "@remix-run/react";
207
208
export default function App() {
209
return (
210
<html>
211
<head>
212
<Meta />
213
<Links />
214
</head>
215
<body>
216
{/* app content */}
217
<ScrollRestoration />
218
<Scripts />
219
<LiveReload />
220
</body>
221
</html>
222
);
223
}
224
```
225
226
## Type Definitions
227
228
### Meta Function Types
229
230
```typescript { .api }
231
type MetaFunction<Loader = unknown, ParentsLoaders = {}> = (
232
args: MetaArgs<Loader, ParentsLoaders>
233
) => MetaDescriptor[];
234
235
interface MetaArgs<Loader = unknown, ParentsLoaders = {}> {
236
data: SerializeFrom<Loader>;
237
params: Params;
238
request: Request;
239
location: Location;
240
matches: MetaMatches<ParentsLoaders>;
241
error?: Error;
242
}
243
244
type MetaDescriptor =
245
| { title: string }
246
| { name: string; content: string }
247
| { property: string; content: string }
248
| { httpEquiv: string; content: string }
249
| { charset: string }
250
| { "script:ld+json": LdJsonObject }
251
| { tagName: "meta"; [key: string]: string }
252
| { tagName: string; [key: string]: unknown };
253
```
254
255
### Links Function Types
256
257
```typescript { .api }
258
interface LinksFunction {
259
(): HtmlLinkDescriptor[];
260
}
261
262
interface HtmlLinkDescriptor {
263
/** Address of the hyperlink */
264
href?: string;
265
/** Relationship between documents */
266
rel: string;
267
/** Media query for the resource */
268
media?: string;
269
/** MIME type of the linked resource */
270
type?: string;
271
/** Integrity hash for subresource integrity */
272
integrity?: string;
273
/** Cross-origin policy */
274
crossOrigin?: "anonymous" | "use-credentials";
275
/** Referrer policy */
276
referrerPolicy?: string;
277
/** Sizes for icons */
278
sizes?: string;
279
/** Potential destination for preload */
280
as?: string;
281
/** Language of the linked resource */
282
hrefLang?: string;
283
}
284
```
285
286
## Implementation Notes
287
288
- **Server-Side Rendering**: All document components work correctly during SSR and client hydration
289
- **Route Aggregation**: Meta and Links automatically collect data from all matched routes in the hierarchy
290
- **Development Features**: LiveReload is automatically excluded from production builds
291
- **Content Security Policy**: All components support nonce values for CSP compliance
292
- **Progressive Enhancement**: Components work even if JavaScript is disabled or fails to load