Skip to content

HuolalaTech/react-json-view

Repository files navigation

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