JsonViewSection - Admin Components

The JsonViewSection component shows a section with the number of keys in an object, and a button that opens a drawer with the object's formatted JSON. The Medusa Admin shows this section at the bottom of its detail pages.

import { JsonViewSection } from "@medusajs/dashboard/components"

Example#

Use JsonViewSection in a widget or UI route to let the user inspect a record's raw data:

import {
  JsonViewSection,
} from "@medusajs/dashboard/components"

const BrandJsonSection = ({ brand }) => {
  return <JsonViewSection data={brand} />
}

In the drawer, Medusa collapses nested objects beyond the first level, and the user can click the copy icon next to a value to copy it to the clipboard.

Props#

The component accepts the JsonViewSectionProps type: