Migrating from v2 to v3

Update version

npm install @dataxpdtn/mui-json-viewer@^3.0.0

Install peer dependencies

This package is using Material-UI  as the base component library, so you need to install it and its peer dependencies. Starting from v3, these dependencies are no longer included in the package’s dependencies.

npm install @mui/material @emotion/react @emotion/styled

Breaking changes

Check browser compatibility

This package was set to support ES5 by default, but it’s no longer the case.
Since V3, as this package is using Material-UI, we have adjusted the browser compatibility to match the Material-UI’s one .

Use defineDataType instead of createDataType

serialize and deserialize have been added to datatype to support editing feature on any data type.

As the result, createDataType has been renamed to defineDataType and the signature has been changed to accept an object instead of a long list of arguments. For more information, please refer to Defining data types.

- createDataType(
-   (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
-   (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
- )
+ defineDataType({
+   is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
+   Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
+ })

Rename displayObjectSize to displaySize

displayObjectSize has been renamed to displaySize to describe the prop’s purpose more accurately.

<JsonViewer
-  displayObjectSize={true}
+  displaySize={true}
   value={value}
/>

Now you can provide a function to customize this behavior by returning a boolean based on the value and path.

<JsonViewer
  displaySize={(path, value) => {
    if (Array.isArray(value)) return false
    if (value instanceof Map) return true
    return true
  }}
  value={value}
/>