autommate-react-json-viewer

The easy JSON processes, Ever

autommate-react-json-viewer allows you to preview JSON and customize label and value via renderer,

Table of Contents

• Installation
• Usage
• Demo
• License

Installation

You need node environment system to use autommate-react-json-viewer. Run the following command to install:

npm install --save autommate-react-json-viewer

Usage

Simply usage format is like below:

import React from 'react';
import JsonTree from 'autommate-react-json-viewer';

function App() {

    const labelRender = (keyPath, key, type, hasParent, hasChild) => {
        return (
            <span>
                <strong>{key} :</strong>
            </span>
        )
    }

    const valueRender = (value) => {
        return <span>{value}</span>
    }

    const jsonData = {
        "name": "AutomMate JSON Viewer",
        "version": "1.0.0",
        "keywords": ["autommate", "json", "viewer"]
    }

    return (
        <JsonTree data={jsonData} expandable={true} labelRender={labelRender} valueRender={valueRender}/>
    );
}

Demo

Click me!

License

MIT ©