Engligh | 中文
<ReactJsonView /> is a React component for displaying serializable data.
# Yarn yarn add @huolala-tech/react-json-view # NPM npm install @huolala-tech/react-json-view # pnpm pnpm install @huolala-tech/react-json-viewSee 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 )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. |