Skip to content

A React-Component for displaying JSON data with field comment. JSON 展示组件,支持字段注释展示

Notifications You must be signed in to change notification settings

link-duan/pretty-json-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pretty Json View

This is a react component for displaying json

Get Started

Install

npm i pretty-json-view

Usage

import {Component} from 'react';
import PrettyJsonView from 'pretty-json-view';
import "pretty-json-view/style.css"

export class Hello extends Component {
    render(){
        let data = {
            code: 0,
            msg: "success",
            data: {
                "username": "linkduan",
                "history": ["home", "school", "office"]
            }
        };
        // Optional: tagInfo will show at then end of json fields
        let tagInfo = {
            "code": "status code",
            "msg": "status message",
            "data.username": "user's name",
            "data.history": "history",
            "data.history.$": "history item"        
        };
        return <div>
            <PrettyJsonView data={data} tagInfo={tagInfo}/>
        </div>
    }
}

It will show like this:

About

A React-Component for displaying JSON data with field comment. JSON 展示组件,支持字段注释展示

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published