{"_id":"@aliyun-sls/react-json-tree","_rev":"10-7902a22463c1a67b380d3db4b45b91bf","name":"@aliyun-sls/react-json-tree","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@aliyun-sls/react-json-tree","version":"0.0.1","keywords":["react","json viewer"],"author":{"url":"http://github.com/chibicode","name":"Shu Uesugi","email":"shu@chibicode.com"},"license":"MIT","_id":"@aliyun-sls/react-json-tree@0.0.1","maintainers":[{"name":"hongqi.lgs","email":"550175214@qq.com"},{"name":"aryame","email":"244913248@qq.com"},{"name":"sanjdw","email":"290506494@qq.com"},{"name":"yuecjnadt","email":"yuecjn@gmail.com"},{"name":"perezyuan","email":"yzmspirit@gmail.com"}],"contributors":[{"url":"http://kuzya.org/","name":"Alexander Kuznetsov","email":"alexkuz@gmail.com"},{"url":"http://www.eskimospy.com/","name":"Dave Vedder","email":"veddermatic@gmail.com"},{"url":"http://www.github.com/dzannotti","name":"Daniele Zannotti","email":"dzannotti@me.com"},{"url":"https://github.com/zalmoxisus","name":"Mihail Diordiev","email":"zalmoxisus@gmail.com"}],"homepage":"https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree","bugs":{"url":"https://github.com/reduxjs/redux-devtools/issues"},"dist":{"shasum":"a0bfe4f6b1b46381c97ded1daa3d9d8f762799a0","tarball":"https://registry.npmjs.org/@aliyun-sls/react-json-tree/-/react-json-tree-0.0.1.tgz","fileCount":61,"integrity":"sha512-tIO+QBISqFpaeuyzxKxHGHL45Zba+OtHHo1DDJ6Rllgj0T57ZgPyII/7mHoDR2QTi/rDVteP9QGXtvOG6Ua8zA==","signatures":[{"sig":"MEUCIQCt7wn0uLe/sn6DuzTbRtxYb93Tj23OeRN2syOnkKqiwwIgOJs2WJSQDJ98kKIsMU2qLALxnhuBHKajlzW9Nwo5Ct8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiwq2/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRww/7BHEpQHa5cTQLW9KBwZUoIrqd+NOw1GFd678jYeV/PqGRfoYu\r\nvJ58iobkr5TZ+IjbrhOO47FQwjyg/QyYknxAHaOY6F88zpCFMSabkC+5FMdN\r\ntez7bsxxWPlDn3l3uT/H7DEAzCc+IjJlF2KE4B2EVrCm0DbPi6XRB6D0Fl7o\r\nUG8zmjTZHUL7nwp3AJ9W0PfugLa80jlTHtOUUf1a59XOVZEHSuuiboM+Vg9g\r\nsnas3tiDcOLHJJKQ+LK9pbf8fz7VI+LkCNU50I/YX1qgQQYdNLqZXSgjoiUZ\r\neuP5sX6PLPhI82D0jPX2X06RRQGvbV5p8inqQsIOazicSKrIQEZiWwzxcDy/\r\nGYD73EDeKjynMFoOlAtnj8+WMK9ypa6vLb7NM8h6cuFfGQl/DJbi1ASooyDr\r\nKYRke5xILtWkuFUYmCKp0doHtfPDL49Tb1/xoGEqQyWBdDOtYXej9lxL+s+E\r\njX93T4Nermxl28Zxb+Dqr+xOjLOnydpQoV/X2s/3ZnnER1mWrvYIqYFDFZCu\r\njN2lhmtHnjMh6DM3raSi0374kRXto/JXkX5cskDhHU50FTMXJRtleXpmJ1aW\r\ngXxuagqSF3d51eVuTcVxMBPPsDt60Q9P9LFaIzebtV14JPhuohxD1hVNBwVK\r\nKWFos9RFEnEchThZnotOr4YecEEbMtrnh74=\r\n=Ujeu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/cjs/index.js","types":"lib/types/index.d.ts","unpkg":"lib/umd/react-json-tree.umd.js","module":"lib/esm/index.js","scripts":{"lint":"eslint . --ext .ts,.tsx","test":"jest","build":"pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:umd","clean":"rimraf lib","build:cjs":"babel src --extensions \".ts,.tsx\" --out-dir lib/cjs","build:esm":"babel src --config-file ./babel.config.esm.json --extensions \".ts,.tsx\" --out-dir lib/esm","build:umd":"rollup -c","prepublish":"pnpm run type-check && pnpm run lint && pnpm run test","type-check":"tsc --noEmit","build:types":"tsc --emitDeclarationOnly"},"_npmUser":{"name":"perezyuan","email":"yzmspirit@gmail.com"},"repository":{"url":"git+https://github.com/reduxjs/redux-devtools.git","type":"git"},"_npmVersion":"8.12.1","description":"React JSON Viewer Component, Extracted from redux-devtools","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"prop-types":"^15.8.1","@types/lodash":"^4.14.182","@babel/runtime":"^7.18.3","@types/prop-types":"^15.7.5","react-base16-styling":"^0.9.1"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^27.5.1","react":"^17.0.2","tslib":"^2.4.0","eslint":"^8.16.0","rimraf":"^3.0.2","rollup":"^2.75.3","ts-jest":"^27.1.5","@babel/cli":"^7.17.10","typescript":"~4.6.4","@babel/core":"^7.18.2","@types/jest":"^27.5.1","@types/node":"^16.11.36","@types/react":"^17.0.45","@babel/preset-env":"^7.18.2","eslint-plugin-jest":"^26.4.5","@babel/preset-react":"^7.17.12","eslint-plugin-react":"^7.30.0","react-test-renderer":"^17.0.2","@babel/eslint-parser":"^7.18.2","@rollup/plugin-babel":"^5.3.1","rollup-plugin-terser":"^7.0.2","eslint-config-prettier":"^8.5.0","@rollup/plugin-commonjs":"^22.0.0","@babel/preset-typescript":"^7.17.12","@typescript-eslint/parser":"^5.26.0","eslint-plugin-react-hooks":"^4.5.0","rollup-plugin-typescript2":"^0.31.2","@types/react-test-renderer":"^17.0.2","@rollup/plugin-node-resolve":"^13.3.0","@babel/plugin-transform-runtime":"^7.18.2","@typescript-eslint/eslint-plugin":"^5.26.0"},"peerDependencies":{"react":"^16.3.0 || ^17.0.0 || ^18.0.0","@types/react":"^16.3.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-json-tree_0.0.1_1656925631612_0.28510898065576273","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-07-04T09:07:11.548Z","modified":"2025-04-07T06:32:51.380Z","0.0.1":"2022-07-04T09:07:11.826Z"},"bugs":{"url":"https://github.com/reduxjs/redux-devtools/issues"},"author":{"url":"http://github.com/chibicode","name":"Shu Uesugi","email":"shu@chibicode.com"},"license":"MIT","homepage":"https://github.com/reduxjs/redux-devtools/tree/master/packages/react-json-tree","keywords":["react","json viewer"],"repository":{"url":"git+https://github.com/reduxjs/redux-devtools.git","type":"git"},"description":"React JSON Viewer Component, Extracted from redux-devtools","contributors":[{"url":"http://kuzya.org/","name":"Alexander Kuznetsov","email":"alexkuz@gmail.com"},{"url":"http://www.eskimospy.com/","name":"Dave Vedder","email":"veddermatic@gmail.com"},{"url":"http://www.github.com/dzannotti","name":"Daniele Zannotti","email":"dzannotti@me.com"},{"url":"https://github.com/zalmoxisus","name":"Mihail Diordiev","email":"zalmoxisus@gmail.com"}],"maintainers":[{"email":"yuecjn@gmail.com","name":"yuecjnadt"},{"email":"ruiqi.hy@alibaba-inc.com","name":"ruiqi.hy"},{"email":"1581024375@qq.com","name":"nosmilen"},{"email":"qinghaotu@126.com","name":"7678tqh"}],"readme":"# react-json-tree\n\nReact JSON Viewer Component, Extracted from [redux-devtools](https://github.com/reduxjs/redux-devtools). Supports [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) objects, such as [Immutable.js](https://facebook.github.io/immutable-js/).\n\n\n\n### Usage\n\n```jsx\nimport { JSONTree } from 'react-json-tree';\n// If you're using Immutable.js: `npm i --save immutable`\nimport { Map } from 'immutable';\n\n// Inside a React component:\nconst json = {\n array: [1, 2, 3],\n bool: true,\n object: {\n foo: 'bar',\n },\n immutable: Map({ key: 'value' }),\n};\n\n;\n```\n\n#### Result:\n\n\n\nCheck out [examples](examples) directory for more details.\n\n### Theming\n\nThis component now uses [react-base16-styling](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-base16-styling) module, which allows to customize component via `theme` property, which can be the following:\n\n- [base16](http://chriskempson.com/projects/base16/) theme data. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).\n- object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument `{ style, className }` and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See [createStylingFromTheme.js](https://github.com/reduxjs/redux-devtools/blob/main/packages/react-json-tree/src/createStylingFromTheme.ts) for the list of styling object keys. Also, this object can extend `base16` theme via `extend` property.\n\nEvery theme has a light version, which is enabled with `invertTheme` prop.\n\n```jsx\nconst theme = {\n scheme: 'monokai',\n author: 'wimer hazenberg (http://www.monokai.nl)',\n base00: '#272822',\n base01: '#383830',\n base02: '#49483e',\n base03: '#75715e',\n base04: '#a59f85',\n base05: '#f8f8f2',\n base06: '#f5f4f1',\n base07: '#f9f8f5',\n base08: '#f92672',\n base09: '#fd971f',\n base0A: '#f4bf75',\n base0B: '#a6e22e',\n base0C: '#a1efe4',\n base0D: '#66d9ef',\n base0E: '#ae81ff',\n base0F: '#cc6633',\n};\n\n\n \n
;\n```\n\n#### Result (Monokai theme, dark background):\n\n\n\n#### Advanced Customization\n\n```jsx\n\n ({\n style: {\n ...style,\n textTransform: expanded ? 'uppercase' : style.textTransform,\n },\n }),\n }}\n />\n
\n```\n\n#### Customize Labels for Arrays, Objects, and Iterables\n\nYou can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).\n\nBy default, it'll be:\n\n```jsx\n {itemType} {itemString}}\n```\n\nBut if you pass the following:\n\n```jsx\nconst getItemString = (type, data, itemType, itemString, keyPath)\n => ( // {type});\n```\n\nThen the preview of child elements now look like this:\n\n\n\n#### Customize Rendering\n\nYou can pass the following properties to customize rendered labels and values:\n\n```jsx\n {key}}\n valueRenderer={(raw) => {raw}}\n/>\n```\n\nIn this example the label and value will be rendered with `` and `` wrappers respectively.\n\nFor `labelRenderer`, you can provide a full path - [see this PR](https://github.com/chibicode/react-json-tree/pull/32).\n\nTheir full signatures are:\n\n- `labelRenderer: function(keyPath, nodeType, expanded, expandable)`\n- `valueRenderer: function(valueAsString, value, ...keyPath)`\n\n#### More Options\n\n- `shouldExpandNode: function(keyPath, data, level)` - determines if node should be expanded (root is expanded by default)\n- `hideRoot: boolean` - if `true`, the root node is hidden.\n- `sortObjectKeys: boolean | function(a, b)` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.\n- `postprocessValue: function(value)` - maps `value` to a new `value`\n- `isCustomNode: function(value)` - overrides the default object type detection and renders the value as a single value\n- `collectionLimit: number` - sets the number of nodes that will be rendered in a collection before rendering them in collapsed ranges\n- `keyPath: (string | number)[]` - overrides the initial key path for the root node (defaults to `[root]`)\n\n### Credits\n\n- All credits to [Dave Vedder](http://www.eskimospy.com/) ([veddermatic@gmail.com](mailto:veddermatic@gmail.com)), who wrote the original code as [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/).\n- Extracted from [redux-devtools](https://github.com/gaearon/redux-devtools), which contained ES6 + inline style port of [JSONViewer](https://bitbucket.org/davevedder/react-json-viewer/) by [Daniele Zannotti](http://www.github.com/dzannotti) ([dzannotti@me.com](mailto:dzannotti@me.com))\n- [Iterable support](https://github.com/gaearon/redux-devtools/pull/79) thanks to [Daniel K](https://github.com/FredyC).\n- npm package created by [Shu Uesugi](http://github.com/chibicode) ([shu@chibicode.com](mailto:shu@chibicode.com)) per [this issue](https://github.com/gaearon/redux-devtools/issues/85).\n- Improved and maintained by [Alexander Kuznetsov](https://github.com/alexkuz). The repository was merged into [`redux-devtools` monorepo](https://github.com/reduxjs/redux-devtools) from [`alexkuz/react-json-tree`](https://github.com/alexkuz/react-json-tree).\n\n### Similar Libraries\n\n- [react-treeview](https://github.com/chenglou/react-treeview)\n- [react-json-inspector](https://github.com/Lapple/react-json-inspector)\n- [react-object-inspector](https://github.com/xyc/react-object-inspector)\n- [react-json-view](https://github.com/mac-s-g/react-json-view)\n\n### License\n\nMIT\n","readmeFilename":"README.md"}