Extend Built-in Data Types

The following is a list of the built-in data types that can be extended:

• stringType
• intType
• floatType
• booleanType
• dateType
• nanType
• nullType
• undefinedType
• bigIntType
• objectType
• functionType

Example

Displaying Boolean Values as Icons

Suppose you want to display boolean values as icons (e.g., ✔️ or ❌) instead of the default true or false. There are two ways to accomplish this:

1. Override the Component property of the built-in booleanType data type:

import { JsonViewer, defineDataType, booleanType } from '@dataxpdtn/mui-json-viewer'
import { Button } from '@mui/material'
 
const toggleBoolType = defineDataType<boolean>({
  ...booleanType,
  Component: ({ value }) => (
    <span>{value ? '✔️' : '❌'}</span>
  )
})
 
<JsonViewer
  value={{
    agree: true,
    disagree: false,
  }}
  valueTypes={[toggleBoolType]}
/>

[Source Code] 

2. Create a new data type with defineEasyType

import { defineEasyType, booleanType } from '@dataxpdtn/mui-json-viewer'
 
const toggleBoolType = defineEasyType<boolean>({
  ...booleanType,
  type: 'bool',
  colorKey: 'base0E',
  Renderer: ({ value }) => (
    <span>{value ? '✔️' : '❌'}</span>
  )
})
 
<JsonViewer
  value={{
    agree: true,
    disagree: false,
  }}
  valueTypes={[toggleBoolType]}
/>

[Source Code] 

Did you notice the difference between the two examples?

defineEasyType is a helper function that creates data types with type labels and colors. So you only need to care about how the value should be rendered. All other details will be automatically handled.