Usage & Conditional Rendering
Install svelte-inspect-value with your favorite package manager.
A common use case for a component like this is to only render it during development.
If you
are using SvelteKit, you can conditionally render Inspect using the dev variable
exported from '$app/environment'.
If you are not using SvelteKit or Vite, esm-env is a good alternative
for checking conditional environment variables with different bundlers and runtimes.
Global Options
svelte-inspect-value exports a utility function to set a "global" config for every instance
of the Inspect-component in or under the component where the function is called (it sets context).
Alternatively, you can use InspectOptionsProvider.
Passing a reactive object to the function will update the components if any property of the object
is changed beceause its reactive (yup!)
You can try this now if you change any options in the configurator at the bottom of your screen!
(hover it)
Options set with props will override any global options
Props
| Name | Description | Default |
|---|---|---|
| value | required. value to inspect. can be any javascript value | n/a |
| name | name of outer value. displayed as key | undefined |
| Options | The following props can be set using setGlobalInspectOptions or InspectOptionsProvider | |
| stringCollapse | set a max display length for string values. 0 means full string will be displayed | 0 |
| showLength | display length of arrays or strings and number of nested entries in objects / maps etc | true |
| showTypes | display type labels before values e.g. "string" / "number." Mainly affects basic primitive types | true |
| showPreview | display preview of nested values of object, array, map, set etc. | true |
| previewDepth | how deeply nested items should be previewed before simply showing types | 1 |
| previewEntries | how many nested items should be previewed | 3 |
| showTools | display row of utility-"tools" when hovering an entry | true |
| noanimate | disable animations / transitions | false |
| embedMedia | embed images and audio if a string value is a path or url that ends with an image or audio file extension | false |
| theme | set color theme class available built-in themes: 'inspect','drak','stereo','dark','light','cotton-candy' | 'inspect' |
| expandAll | initially expand all nodes. can be a performance hitch with a lot of entries | false |
| expandLevel | default level of initially expanded nested nodes | 1 |
| expandPaths | array of paths (string) to initially expanded nodes | [] |
| borderless | remove background color, border and padding | false |
| quotes | quote type for string values. 'single' or 'double' | 'single' |
| renderIf | function or value. render condition for Inspect. if value or return value of
function is truthy, Inspect will render. | true |
| customComponents | custom components for values. object with type as keyname and tuple of component and optional prop modification function. extended documentation here | {} |
| parseJson | if enabled, attempt to parse strings that start with { or [ and display the parsed value if it was valid JSON | false |