@dataxpdtn/mui-json-viewer


@dataxpdtn/mui-json-viewer is a React component that can be used to view and display any kind of data, not just JSON.

~~Json Viewer?~~
ANY Data Viewer ✅


Features 🚀

- 🦾 100% TypeScript
- 🎨 Customizable: Key, value, editable, copy, select... Anything you can think of!
- 🌈 Theme support: light or dark, or use Base16 themes.
- ⚛️ SSR Ready
- 📋 Copy to Clipboard
- 🔍 Inspect anything: Object, Array, primitive types, and even Map and Set.
- 📊 Metadata preview: Total items, length of string...
- ✏️ Editor: Comes with an editor for basic types, which you can also customize to fit your use case.

Installation

@dataxpdtn/mui-json-viewer is using Material-UI as the base component library, so you need to install it and its peer dependencies first.

``sh
npm install @dataxpdtn/mui-json-viewer @mui/material @emotion/react @emotion/styled
`

$3

`html










`

Usage

Here is a basic example:

`jsx
import { JsonViewer } from '@dataxpdtn/mui-json-viewer'

const object = {
/ my json object /
}
const Component = () =>
`

$3

You can define custom data types to handle data that is not supported out of the box. Here is an example of how to display an image:

`jsx
import { JsonViewer, defineDataType } from '@dataxpdtn/mui-json-viewer'

const object = {
image: 'https://i.imgur.com/1bX5QH6.jpg'
// ... other values
}

// Let's define a data type for image
const imageDataType = defineDataType({
is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
Component: (props) =>
})

const Component = () =>
``

!Avatar Preview

see the full code

Theme

Please refer to Styling and Theming

!Ocean Theme Preview

Contributors

Acknowledge

This package is originally based on mac-s-g/react-json-view.

Also thanks open source projects that make this possible.

Sponsoring services

!Netlify

Netlify lets us distribute the site.

LICENSE

This project is licensed under the terms of the MIT license.