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-viewUsage
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. |