Customizing JSON Dive

Options

The main JSONDive component takes in an options object with several fields that may be used to customize JSON Dive.

It’s recommended that you memoize the options to reduce re-renders. A typical creation of options would look like this:

const options = useMemo(
	(): JSONDiveOptions => ({
		// ...
	}),
	[]
)

onValueMagnified

onValueMagnified?: (args: { value: string }) => void

onValueMagnified is a hook that will be called when a truncated value is expanded. The default behavior here is to open a modal that displays the full value, but this hook may be used to prevent and override that behavior. This would let you use your native modal solution in this case (for example.)

icons

icons?: IconPack

icons lets you override the icons that are used in various places in JSON Dive. It has fields for each icon type that are of type IconComponent, which is a React functional component that renders the icon and takes in a desired size.

You may ignore or scale this size if you would like to.

IconComponent is meant to be compatible with the type of icons from the lucide-react package, which is what JSON Dive uses under the hood. So for example, if you’d like to use a different Lucide icon in another icons place, you’d simply pass another Lucide icon.

import { Sailboat } from "lucide-react"

// Elsewhere...
const options = useMemo(
	(): JSONDiveOptions => ({
		icons: {
			magnify: Sailboat,
		},
	}),
	[]
)

If you’d like to use an entirely different component, you’ll need to define a new functional component.

function MyIcon(props: { size: number }) {
	return <svg>{/* ... */}</svg>
}

// Elsewhere...
const options = useMemo(
	(): JSONDiveOptions => ({
		icons: {
			magnify: MyIcon,
		},
	}),
	[]
)

Colors

JSON Dive uses CSS variables for all colors. These variables are prefixed with --json-dive-color. You may override these colors in CSS by targeting the json-dive-viewer-instance CSS class (which is applied to the outer container of JSON Dive.)

.json-dive-viewer-instance {
	--json-dive-color-badge-background: #ff0000;
}

For a full list of available colors, consult color-mapping.yml in the repository.