@huolala-tech/react-json-view

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.

License

MIT