React Router Devtools Client Configuration

Before we explain all the possible options here is the client configuration Typescript type:

type RdtClientConfig = {
    expansionLevel: number;
    routeBoundaryGradient: "sea"  "hyper"  "gotham"  "gray"  "watermelon"  "ice"  "silver";
}

Let's go through each option and see what it does.

Expansion Level

This option is used to set the initial expansion level of the returned JSON data in the Active Page tab. The default value is 1.

If you open up the Active Page and look at the returned loader data with expansion level set to 1, it will look like this:

"data": {
    "property": "value"
}

If you set the expansion level to 0, the returned loader data will be collapsed:

"data": { ... } +

Route Boundary Gradient

This option is used to set the color of the route boundary gradient. The possible values are:

• sea
• hyper
• gotham
• gray
• watermelon
• ice
• silver

The default value is watermelon.

Creating a custom configuration

To create a custom configuration you can use the following code snippet:

import { defineRdtConfig } from "react-router-devtools";

const customConfig = defineRdtConfig({
  client: {
    expansionLevel: 2,
    routeBoundaryGradient: "gotham",
  }
});

export default customConfig;

Then you can use this configuration in your vite.config.js file like this:

import customConfig from "./rdt.config";
import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [reactRouterDevTools(customConfig)],
});