2.0.2 • Published 7 months ago
magic-json-tree v2.0.2
Quick Start
npm install --save magic-json-treeIn your Svelte app:
<script>
import Tree from 'magic-json-tree'
const json = {
name: 'john',
age: 123,
male: true,
pets: ['rat', 'flees'],
inventory: {
belt: ['coins', 'knife', 8, undefined],
backpack: null,
},
skills: new Map([
['strength', 123],
[456, ['one', 'two', 'three']],
[['favourite', 'inputs'], { taste: 'apple', smell: 'banana' }],
]),
}
</script>
<Tree value={json} />This renders a tree view:
Props
| Name | Type | Default | Description |
|---|---|---|---|
expand | number | (string | number)[] | 0 | Pass a number to expand that many levels deep OR pass an object path like ['item', 'subItem', 'subSubItem'] |
formatKey | (any, any, path: any[]) => any | null | Pass a function to format object keys. The function is passed [key, value] as its first parameter, and an object path as its second (e.g. ['item', 'subItem', 2, 'subSubItem']) |
formatValue | (any, any, path: any[]) => any | null | Pass a function to format object values. The function is passed [key, value] as its first parameter, and an object path as its second (e.g. ['item', 'subItem', 2, 'subSubItem']) |
Example
Execute npm run dev and open the given URL in your browser.
Theming
You can set some of the following CSS variables to overwrite the default colors:
--mjt-color-key: var(--base1);
--mjt-color-string: var(--orange);
--mjt-color-number: var(--cyan);
--mjt-color-null: var(--yellow);
--mjt-color-undefined: var(--yellow);
--mjt-color-boolean: var(--blue);
--mjt-color-object: var(--base1);
--mjt-color-array: var(--base1);
--mjt-color-symbol: var(--green);
--mjt-color-map: var(--green);
--mjt-color-set: var(--green);