JS Object Editor

Um ein JavaScript Objekt oder Array visuell ansprechend darzustellen, kann der JsObjectEditor verwendet werden. Dieser Editor ist besonders nützlich, um komplexe Datenstrukturen in einer bearbeitbaren Form darzustellen.

import JsObjectEditor from '@tdev-components/shared/JsObject/Editor';

<JsObjectEditor
  js={{
    name: "John Doe",
    age: 30,
    hobbies: [
      "Reading",
      "Traveling",
      {
        name: "Cycling",
        type: ["Sport", "Leisure"],
        details: { bike: "Norco", gear: "Mountain" },
      },
    ],
    address: {
      street: "123 Main St",
      city: "Anytown",
      country: "USA",
    },
    deeplyNested: {
      level1: {
        level2: {
          level3: {
            value: "Deep Value",
            array: [1, 2, 3, { nested: "Nested Value" }],
          },
        },
        level2b: {
          anotherValue: "Another Deep Value",
          array: [4, 5, 6],
        },
      },
    }
  }}
/>

http://localhost:3000

*

*

John Doe

*

*

*

Reading

Traveling

*

Cycling

*

Sport

Leisure

*

*

Norco

*

Mountain

*

*

Anytown

*

USA

*

123 Main St

*

*

*

*

*

*

Deep Value

*

*

Nested Value

*

*

Another Deep Value

*

foo

name => `Hello, ${name}!`

http://localhost:3000

*

*

test