@huolala-tech/react-json-view NPM

Engligh | 中文

@huolala-tech/react-json-view

<ReactJsonView /> is a React component for displaying serializable data.

Install

# Yarn
yarn add @huolala-tech/react-json-view

# NPM
npm install @huolala-tech/react-json-view

# pnpm
pnpm install @huolala-tech/react-json-view

Usage

See examples

imoprt React from 'react';
import ReactDOM from 'react-dom';

import ReactJsonView from '@huolala-tech/react-json-view';
import '@huolala-tech/react-json-view/dist/style.css';

const data = [1,2,3,4]

const App = () => {
  return (
    <div id="app">
      <ReactJsonView
        source={data}
        darkMode={false}
        rootLabel="Response data"
        keyCount={200}
        defaultExpand={false}
        maxTitleSize={100}
      />
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root') as HTMLElement
)

Config

The default configuration usage:

<ReactJsonView
  source={data}
  darkMode={false}
  rootLabel=""
  defaultExpand={false}
  keyCount={200}
  maxTitleSize={100}
  copyable={true}
  expandable={true}
/>

Name	Type	Default value	Description
`source`	`object`	None	Origin serializable data.
`darkMode`	`boolean`	`false`	Indicate whether enable dark mode.
`rootLabel`	`React.ReactNode`	`""`	Root node's label.
`defaultExpand`	`boolean / number`	`false`	Whether expand property panel. Expand at a particular depth if you pass a integer value.
`keyCount`	`number / "all"`	`200`	`ReactJsonView` supports lazily loading more properties. The parameter indicates how many properties to show at a time, and you can pass `"all"` to show all properties.
`maxTitleSize`	`number`	`100`	The max length of abbreviated title in collapse.
`copyable`	`boolean`	`true`	Indicate whether enable copy function.
`expandable`	`boolean`	`true`	Indicate whether enable expand function.
`stringEllipse`	`boolean`	`true`	Ellipse if the string type value's length is more than 100 or show all text when you pass false.