UNPKG

3.04 kB Markdown View Raw
1---
2title: Presets
3---
4
5# Presets
6
7[MODES: framework]
8
9The [React Router config][react-router-config] supports a `presets` option to ease integration with other tools and hosting providers.
10
11[Presets][preset-type] can only do two things:
12
13- Configure React Router config options on your behalf
14- Validate the resolved config
15
16The config returned by each preset is merged in the order the presets were defined. Any config directly specified in your React Router config will be merged last. This means that your config will always take precedence over any presets.
17
18## Defining preset config
19
20As a basic example, let's create a preset that configures a [server bundles function][server-bundles]:
21
22```ts filename=my-cool-preset.ts
23import type { Preset } from "@react-router/dev/config";
24
25export function myCoolPreset(): Preset {
26 return {
27 name: "my-cool-preset",
28 reactRouterConfig: () => ({
29 serverBundles: ({ branch }) => {
30 const isAuthenticatedRoute = branch.some((route) =>
31 route.id.split("/").includes("_authenticated"),
32 );
33
34 return isAuthenticatedRoute
35 ? "authenticated"
36 : "unauthenticated";
37 },
38 }),
39 };
40}
41```
42
43## Validating config
44
45Keep in mind that other presets and user config can still override the values returned from your preset.
46
47In our example preset, the `serverBundles` function could be overridden with a different, conflicting implementation. If we want to validate that the final resolved config contains the `serverBundles` function from our preset, we can use the `reactRouterConfigResolved` hook:
48
49```ts filename=my-cool-preset.ts lines=[22-27]
50import type {
51 Preset,
52 ServerBundlesFunction,
53} from "@react-router/dev/config";
54
55const serverBundles: ServerBundlesFunction = ({
56 branch,
57}) => {
58 const isAuthenticatedRoute = branch.some((route) =>
59 route.id.split("/").includes("_authenticated"),
60 );
61
62 return isAuthenticatedRoute
63 ? "authenticated"
64 : "unauthenticated";
65};
66
67export function myCoolPreset(): Preset {
68 return {
69 name: "my-cool-preset",
70 reactRouterConfig: () => ({ serverBundles }),
71 reactRouterConfigResolved: ({ reactRouterConfig }) => {
72 if (
73 reactRouterConfig.serverBundles !== serverBundles
74 ) {
75 throw new Error("`serverBundles` was overridden!");
76 }
77 },
78 };
79}
80```
81
82The `reactRouterConfigResolved` hook should only be used when it would be an error to merge or override your preset's config.
83
84## Using a preset
85
86Presets are designed to be published to npm and used within your React Router config.
87
88```ts filename=react-router.config.ts lines=[6]
89import type { Config } from "@react-router/dev/config";
90import { myCoolPreset } from "react-router-preset-cool";
91
92export default {
93 // ...
94 presets: [myCoolPreset()],
95} satisfies Config;
96```
97
98[react-router-config]: https://api.reactrouter.com/v8/types/_react-router_dev.config.Config.html
99[preset-type]: https://api.reactrouter.com/v8/types/_react-router_dev.config.Preset.html
100[server-bundles]: ./server-bundles
101
\No newline at end of file