JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 112319
  • Score
    100M100P100Q177438F
  • License MIT

Interactive Json Viewer, but not only a json viewer

Package Exports

  • @textea/json-viewer

Readme

@textea/json-viewer

npm npm

This is a React component for JSON viewer, but not only a JSON viewer.

Json Viewer? ANY Data Viewer ✅

This is v2 branch with fancy features like 100% TypeScript, lightly code and customizable component support.

If you are looking for v1 version based on mac-s-g/react-json-view, Please see v1.x.

Open in StackBlitz

Usage

# npm
npm install @textea/json-viewer@beta
# yarn
yarn add @textea/json-viewer@beta
# pnpm
pnpm add @textea/json-viewer@beta

Type Declaration

see src/type.ts

Basic Example

import JsonViewer from '@textea/json-viewer'

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

Customizable data type

import JsonViewer from '@textea/json-viewer'

const object = {
  // what if I want to inspect a image?
  image: 'https://i.imgur.com/1bX5QH6.jpg',
  // ... other values
}
const Component = () => (
  <JsonViewer
    value={object}
    // just define it
    valueTypes={[
      {
        is: (value) =>
          typeof value === 'string' &&
          value.startsWith('https://i.imgur.com'),
        Component: (props) => {
          return <img height="50px" src={props.value} alt={props.value}/>;
        },
      },
    ]}
  />
)

Avatar Preview

see the full code

Base 16 Theme Support

export const ocean: NamedColorspace = {
  scheme: 'Ocean',
  author: 'Chris Kempson (http://chriskempson.com)',
  base00: '#2b303b',
  base01: '#343d46',
  base02: '#4f5b66',
  base03: '#65737e',
  base04: '#a7adba',
  base05: '#c0c5ce',
  base06: '#dfe1e8',
  base07: '#eff1f5',
  base08: '#bf616a',
  base09: '#d08770',
  base0A: '#ebcb8b',
  base0B: '#a3be8c',
  base0C: '#96b5b4',
  base0D: '#8fa1b3',
  base0E: '#b48ead',
  base0F: '#ab7967'
}

const Component = () => (
  <JsonViewer
    value={object}
    theme={ocean}
  />
)

Ocean Theme Preview

Features

  • 100% TypeScript
  • Customizable
    • keyRenderer for customize key renderer
    • valueTypes for customize any value types you want
    • light | dark | base16 Theme support
    • custom metadata
  • Support Next.js SSR
  • onChange props allow users to edit value
  • Inspect object, Array, primitive type, even Map and Set by default.
  • Metadata preview, like total items, length of string...
  • Copy to Clipboard on Click
  • Editor for basic types
  • Fully Test Coverage

Acknowledge

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

LICENSE

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