eyhn / json-viewer Goto Github PK

View Code? Open in Web Editor NEW

This project forked from texteainc/json-viewer

0.0 1.0 0.0 2.98 MB

not only a JSON viewer

Home Page: https://viewer.textea.io

License: MIT License

Shell 0.18% JavaScript 4.81% TypeScript 95.01%

json-viewer's Introduction

@textea/json-viewer

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.

Usage

NPM

npm install @textea/json-viewer

Yarn

yarn add @textea/json-viewer

PNPM

pnpm add @textea/json-viewer

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, createDataType } 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) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
      },
      // or
      createDataType(
        (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
        (props) => <Image height={50} width={50} src={props.value} alt={props.value}/>,
      )
    ]}
  />
)

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}
  />
)

Browser

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