Engligh | 中文

@huolala-tech/react-json-view

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

Install

1# Yarn
2yarn add @huolala-tech/react-json-view
3
4# NPM
5npm install @huolala-tech/react-json-view
6
7# pnpm
8pnpm install @huolala-tech/react-json-view

Usage

See examples

1imoprt React from 'react';
2import ReactDOM from 'react-dom';
3
4import ReactJsonView from '@huolala-tech/react-json-view';
5import '@huolala-tech/react-json-view/dist/style.css';
6
7const data = [1,2,3,4]
8
9const App = () => {
10  return (
11    <div id="app">
12      <ReactJsonView
13        source={data}
14        darkMode={false}
15        rootLabel="Response data"
16        keyCount={200}
17        defaultExpand={false}
18        maxTitleSize={100}
19      />
20    </div>
21  );
22};
23
24ReactDOM.render(
25  <React.StrictMode>
26    <App />
27  </React.StrictMode>,
28  document.getElementById('root') as HTMLElement
29)

Config

The default configuration usage:

1<ReactJsonView
2  source={data}
3  darkMode={false}
4  rootLabel=""
5  defaultExpand={false}
6  keyCount={200}
7  maxTitleSize={100}
8  copyable={true}
9  expandable={true}
10/>

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