UNPKG

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