@textea/json-viewer
TypeScript icon, indicating that this package has built-in type declarations

3.4.0 • Public • Published

@textea/json-viewer

npm npm npm codecov Netlify Status

@textea/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

Open in StackBlitz

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

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

npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled

CDN

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="json-viewer"></div>
    <script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
    <script>
      new JsonViewer({
        value: {
          /* ... */
        }
      }).render('#json-viewer')
    </script>
  </body>
</html>

Usage

Here is a basic example:

import { JsonViewer } from '@textea/json-viewer'

const object = {
  /* my json object */
}
const Component = () => <JsonViewer value={object} />

Customization

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:

import { JsonViewer, defineDataType } from '@textea/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) => <Image height={50} width={50} src={props.value} alt={props.value} />
})

const Component = () => <JsonViewer value={object} valueTypes={[imageDataType]} />

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.

Package Sidebar

Install

npm i @textea/json-viewer

Weekly Downloads

31,737

Version

3.4.0

License

MIT

Unpacked Size

1.14 MB

Total Files

9

Last publish

Collaborators

  • pionxzh
  • forrestbao