microlinkhq · pgliang001 · Feb 15, 2025 · Feb 17, 2025 · Mar 15, 2025
diff --git a/README.md b/README.md
@@ -104,6 +104,57 @@ The following object will be passed to your method:
 
 Returning `false` from a callback method will prevent the src from being affected.
 
+### `ReactPureJsonView` component
+
+#### Why is it needed
+
+Users usually use this repository to directly connect and display `static data` (such as external JSON files, other API operation results, etc.). These static data may have (Javascript language) big number ([example](https://www.geeksforgeeks.org/how-to-deal-with-large-numbers-in-javascript/)) and floating point ([example](https://stackoverflow.com/a/55291279)) problems, and users are more interested in correctly displaying the static data and do not care about the data involving different languages (Javascript) problems.
+
+#### Usage
+
+- JSON String Example
+
+  ```js
+  import { ReactPureJsonView } from '@microlink/react-json-view'
+
+  /**
+   * Get `src` (json string) from the external file
+   *
+   * @type {String}
+   */
+  const data = await fetch('data/data.json')
+
+  <ReactPureJsonView src={data} />
+  ```
+
+- JSON Object Example (legacy mode, the same as [ReactJsonView Usage](#usage))
+
+  ```js
+  import { ReactPureJsonView } from '@microlink/react-json-view'
+
+  <ReactPureJsonView src={{
+    string: 'this is a test string',
+    integer: 42,
+    array: [1, 2, 3, 'test', NaN],
+    float: 3.14159,
+    undefined: undefined,
+    object: {
+      'first-child': true,
+      'second-child': false,
+      'last-child': null
+      },
+    string_number: '1234',
+    date: new Date(),
+    bigNumber: new BigNumber('0.0060254656709730629123')
+  }} />
+  ```
+
+#### API
+
+| Name                         | Type                                             | Default                  | Description                                                                                                                                                                                                                                                               |
+|:-----------------------------|:-------------------------------------------------|:-------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `src`                        | `JSON Object` or `JSON String`                   | None                     | This property contains your input JSON (object or json-string).                                                                                                                                                                                                           |
+
 ### Theming
 
 #### Builtin theme

diff --git a/dev-server/dist/index.html b/dev-server/dist/index.html
@@ -29,6 +29,42 @@
       src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
     ></script>
     <style>
+      body {
+        padding-top: 50px;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .title {
+        margin: 0;
+        padding: 0px 30px;
+        background-color: #fff;
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 36px;
+        z-index: 2;
+      }
+
+      .switch {
+        position: fixed;
+        right: 10px;
+        top: 6px;
+        z-index: 10;
+        color: rgb(233, 233, 233);
+      }
+
+      .switch a {
+        color: rgb(190, 189, 189);
+      }
+
+      .switch a:active {
+        color: rgb(85, 26, 139);
+      }
+
       .react-json-view {
         padding: 4px 6px;
         border-radius: 3px;
@@ -37,6 +73,16 @@
     </style>
   </head>
   <body>
+    <div class="switch">
+      <a href="/" title="json to ReactJsonView prop 'src'">
+        Index
+      </a> | <a href="/?json_string=false" title="json to ReactPureJsonView prop 'src'">
+        Json[ReactPureJsonView]
+      </a> <b style="color: blue">vs.</b> <a href="/?json_string=true" title="json string to ReactPureJsonView prop 'src'">
+          Json String[ReactPureJsonView]
+      </a>
+    </div>
+    <h2 id="app-title" class="title"></h2>
     <div id="app-container"></div>
     <script type="text/javascript" src="./main.js"></script>
   </body>

diff --git a/dev-server/src/JsonString.js b/dev-server/src/JsonString.js
@@ -0,0 +1,200 @@
+'use strict'
+
+//import react and reactDom for browser rendering
+import React from 'react'
+
+// import  test json data
+import {
+  getExampleArray,
+  getExampleJson1,
+  getExampleJson2,
+  getExampleJson3,
+  getExampleJson4,
+  getExampleWithStringEscapeSequences
+} from './test.json-data'
+
+//import the react-json-view component (installed with npm)
+import JsonViewer, { defaultBigNumberImplement as BigNumber} from './../../src/js/index'
+
+export default (
+  <div>
+    {/* just pass in your JSON to the src attribute */}
+    <JsonViewer
+      bigNumber={BigNumber}
+      sortKeys
+      style={{ padding: '30px', backgroundColor: 'white' }}
+      src={getExampleJson1()}
+      quotesOnKeys={false}
+      collapseStringsAfterLength={12}
+      onEdit={e => {
+        console.log('edit callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onDelete={e => {
+        console.log('delete callback', e)
+      }}
+      onAdd={e => {
+        console.log('add callback', e)
+        if (e.new_value == 'error') {
+          return false
+        }
+      }}
+      onSelect={e => {
+        console.log('select callback', e)
+        console.log(e.namespace)
+      }}
+      displayObjectSize={true}
+      name={'dev-server'}
+      enableClipboard={copy => {
+        console.log('you copied to clipboard!', copy)
+      }}
+      shouldCollapse={({ src, namespace, type }) => {
+        if (type === 'array' && src.indexOf('test') > -1) {
+          return true
+        } else if (namespace.indexOf('moment') > -1) {
+          return true
+        }
+        return false
+      }}
+      defaultValue=''
+    />
+
+    <br />
+
+    {/* use a base16 theme */}
+    <JsonViewer
+      src={getExampleJson1()}
+      bigNumber={BigNumber}
+      theme='railscasts'
+      validationMessage="You're doing something wrong."
+      collapseStringsAfterLength={15}
+      onEdit={e => {
+        console.log(e)
+        if (e.new_value === 'error') {
+          return false
+        }
+      }}
+      onDelete={e => {
+        console.log(e)
+      }}
+      onAdd={e => {
+        console.log(e)
+        if (e.new_value === 'error') {
+          return false
+        }
+      }}
+      name={false}
+      iconStyle='triangle'
+      shouldCollapse={({ src, type }) =>
+        type === 'object' &&
+        src.constructor &&
+        src.constructor.name === 'Moment'
+      }
+      selectOnFocus
+    />
+
+    <br />
+
+    {/* initialize this one with a name and default collapsed */}
+    <JsonViewer
+      src={getExampleJson2()}
+      collapsed={true}
+      name={'feature_set'}
+      displayDataTypes={false}
+      indentWidth={2}
+    />
+
+    <br />
+
+    {/* initialize this one with a name and default collapsed */}
+    <JsonViewer
+      src={getExampleJson2()}
+      collapsed={1}
+      name={'feature_set'}
+      displayDataTypes={false}
+      indentWidth={5}
+    />
+
+    <br />
+
+    {/* initialize an example with a long string */}
+    <JsonViewer
+      src={getExampleJson3()}
+      collapsed={true}
+      name={'collapsed_by_default_example'}
+      indentWidth={8}
+      displayObjectSize={false}
+      displayDataTypes={false}
+      enableClipboard={false}
+    />
+
+    <br />
+
+    {/*demo array support*/}
+    <JsonViewer
+      src={getExampleArray()}
+      theme='solarized'
+      onEdit={edit => {
+        console.log(edit)
+      }}
+    />
+
+    <br />
+
+    {/* custom theme example */}
+    <JsonViewer
+      enableClipboard={false}
+      src={getExampleJson1()}
+      bigNumber={BigNumber}
+      shouldCollapse={({ src, namespace, type }) =>
+        namespace.indexOf('moment') > -1
+      }
+      theme={{
+        base00: 'white',
+        base01: '#ddd',
+        base02: '#ddd',
+        base03: '#444',
+        base04: 'purple',
+        base05: '#444',
+        base06: '#444',
+        base07: '#444',
+        base08: '#444',
+        base09: 'rgba(70, 70, 230, 1)',
+        base0A: 'rgba(70, 70, 230, 1)',
+        base0B: 'rgba(70, 70, 230, 1)',
+        base0C: 'rgba(70, 70, 230, 1)',
+        base0D: 'rgba(70, 70, 230, 1)',
+        base0E: 'rgba(70, 70, 230, 1)',
+        base0F: 'rgba(70, 70, 230, 1)'
+      }}
+    />
+
+    <JsonViewer
+      theme='hopscotch'
+      collapsed={false}
+      name='large_array'
+      groupArraysAfterLength={50}
+      src={getExampleJson4()}
+    />
+
+    {/* Name as colored react component */}
+    <JsonViewer
+      collapsed
+      name={
+        <span style={{ color: 'red', fontWeight: 800 }}>
+          React Element as name
+        </span>
+      }
+      src={getExampleJson2()}
+    />
+
+    {/* String with special escape sequences */}
+    <JsonViewer
+      theme='monokai'
+      name='String with special escape sequences'
+      src={getExampleWithStringEscapeSequences()}
+    />
+  </div>
+)