{"_id":"@alexkuz/react-json-tree","_rev":"3143980","name":"@alexkuz/react-json-tree","description":"React JSON Viewer Component, Extracted from redux-devtools","dist-tags":{"beta":"0.6.0-alpha1","latest":"0.5.3"},"maintainers":[{"name":"alexkuz","email":""}],"time":{"modified":"2023-11-27T06:57:36.000Z","created":"2016-02-22T21:01:59.275Z","0.6.0-alpha1":"2016-03-02T08:29:18.879Z","0.6.0-alpha":"2016-03-02T07:52:29.456Z","0.5.3":"2016-02-22T21:01:59.275Z"},"users":{},"author":{"name":"Shu Uesugi","email":"shu@chibicode.com","url":"http://github.com/chibicode"},"repository":{"type":"git","url":"git+https://github.com/chibicode/react-json-tree.git"},"versions":{"0.6.0-alpha1":{"name":"@alexkuz/react-json-tree","version":"0.6.0-alpha1","description":"React JSON Viewer Component, Extracted from redux-devtools","main":"lib/index.js","scripts":{"clean":"rimraf lib","build":"babel src --out-dir lib","lint":"eslint src test examples","test":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive","test:watch":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive","prepublish":"npm run lint && npm run test && npm run clean && npm run build"},"repository":{"type":"git","url":"git+https://github.com/chibicode/react-json-tree.git"},"keywords":["react","json viewer"],"author":{"name":"Shu Uesugi","email":"shu@chibicode.com","url":"http://github.com/chibicode"},"contributors":[{"name":"Dave Vedder","email":"veddermatic@gmail.com","url":"http://www.eskimospy.com/"},{"name":"Daniele Zannotti","email":"dzannotti@me.com","url":"http://www.github.com/dzannotti"}],"license":"MIT","bugs":{"url":"https://github.com/chibicode/react-json-tree/issues"},"homepage":"https://github.com/chibicode/react-json-tree","devDependencies":{"babel-cli":"^6.3.17","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-plugin-transform-decorators-legacy":"^1.3.3","babel-preset-es2015-loose":"^6.1.3","babel-preset-stage-0":"^6.3.13","babel-preset-react":"^6.3.13","eslint":"^0.23","eslint-config-airbnb":"0.0.6","eslint-plugin-react":"^2.3.0","expect":"^1.6.0","isparta":"^3.0.3","mocha":"^2.2.5","rimraf":"^2.3.4"},"peerDependencies":{"react":"^0.14.0"},"dependencies":{"babel-plugin-transform-runtime":"^6.5.0","babel-runtime":"^6.3.13","react-mixin":"^1.7.0","react-pure-render":"^1.0.2"},"gitHead":"a8f1c838c0c7876669506b46b09ac000150f3b19","_id":"@alexkuz/react-json-tree@0.6.0-alpha1","_shasum":"2ede6431c6a8c82923bb6a1e048b02ab9cbe9ffc","_from":".","_npmVersion":"3.7.3","_nodeVersion":"4.3.1","_npmUser":{"name":"alexkuz","email":"alexkuz@gmail.com"},"maintainers":[{"name":"alexkuz","email":""}],"dist":{"shasum":"2ede6431c6a8c82923bb6a1e048b02ab9cbe9ffc","size":11668,"noattachment":false,"key":"/@alexkuz/react-json-tree/-/@alexkuz/react-json-tree-0.6.0-alpha1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@alexkuz/react-json-tree/download/@alexkuz/react-json-tree-0.6.0-alpha1.tgz"},"_npmOperationalInternal":{"host":"packages-13-west.internal.npmjs.com","tmp":"tmp/react-json-tree-0.6.0-alpha1.tgz_1456907356462_0.7151013684924692"},"directories":{},"publish_time":1456907358879,"_hasShrinkwrap":false,"_cnpm_publish_time":1456907358879,"_cnpmcore_publish_time":"2021-12-17T00:05:27.582Z"},"0.6.0-alpha":{"name":"@alexkuz/react-json-tree","version":"0.6.0-alpha","description":"React JSON Viewer Component, Extracted from redux-devtools","main":"lib/index.js","scripts":{"clean":"rimraf lib","build":"babel src --out-dir lib","lint":"eslint src test examples","test":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive","test:watch":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive","prepublish":"npm run lint && npm run test && npm run clean && npm run build"},"repository":{"type":"git","url":"git+https://github.com/chibicode/react-json-tree.git"},"keywords":["react","json viewer"],"author":{"name":"Shu Uesugi","email":"shu@chibicode.com","url":"http://github.com/chibicode"},"contributors":[{"name":"Dave Vedder","email":"veddermatic@gmail.com","url":"http://www.eskimospy.com/"},{"name":"Daniele Zannotti","email":"dzannotti@me.com","url":"http://www.github.com/dzannotti"}],"license":"MIT","bugs":{"url":"https://github.com/chibicode/react-json-tree/issues"},"homepage":"https://github.com/chibicode/react-json-tree","devDependencies":{"babel-cli":"^6.3.17","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-plugin-transform-decorators-legacy":"^1.3.3","babel-preset-es2015-loose":"^6.1.3","babel-preset-stage-0":"^6.3.13","babel-preset-react":"^6.3.13","eslint":"^0.23","eslint-config-airbnb":"0.0.6","eslint-plugin-react":"^2.3.0","expect":"^1.6.0","isparta":"^3.0.3","mocha":"^2.2.5","rimraf":"^2.3.4"},"peerDependencies":{"react":"^0.14.0"},"dependencies":{"babel-plugin-transform-runtime":"^6.5.0","babel-runtime":"^6.3.13","react-mixin":"^1.7.0","react-pure-render":"^1.0.2"},"gitHead":"1334eb903a80bd0d410a9ef80652b919a0bb1fc8","_id":"@alexkuz/react-json-tree@0.6.0-alpha","_shasum":"60da5b5c028a1378c2028b996785fd73d2d29202","_from":".","_npmVersion":"3.7.3","_nodeVersion":"4.3.1","_npmUser":{"name":"alexkuz","email":"alexkuz@gmail.com"},"maintainers":[{"name":"alexkuz","email":""}],"dist":{"shasum":"60da5b5c028a1378c2028b996785fd73d2d29202","size":11671,"noattachment":false,"key":"/@alexkuz/react-json-tree/-/@alexkuz/react-json-tree-0.6.0-alpha.tgz","tarball":"http://registry.cnpm.dingdandao.com/@alexkuz/react-json-tree/download/@alexkuz/react-json-tree-0.6.0-alpha.tgz"},"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-json-tree-0.6.0-alpha.tgz_1456905147077_0.8435108349658549"},"directories":{},"publish_time":1456905149456,"_hasShrinkwrap":false,"_cnpm_publish_time":1456905149456,"_cnpmcore_publish_time":"2021-12-17T00:05:27.784Z"},"0.5.3":{"name":"@alexkuz/react-json-tree","version":"0.5.3","description":"React JSON Viewer Component, Extracted from redux-devtools","main":"lib/index.js","scripts":{"clean":"rimraf lib","build":"babel src --out-dir lib","lint":"eslint src test examples","test":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive","test:watch":"NODE_ENV=test mocha --compilers js:babel-core/register --recursive --watch","test:cov":"babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive","prepublish":"npm run lint && npm run test && npm run clean && npm run build"},"repository":{"type":"git","url":"git+https://github.com/chibicode/react-json-tree.git"},"keywords":["react","json viewer"],"author":{"name":"Shu Uesugi","email":"shu@chibicode.com","url":"http://github.com/chibicode"},"contributors":[{"name":"Dave Vedder","email":"veddermatic@gmail.com","url":"http://www.eskimospy.com/"},{"name":"Daniele Zannotti","email":"dzannotti@me.com","url":"http://www.github.com/dzannotti"}],"license":"MIT","bugs":{"url":"https://github.com/chibicode/react-json-tree/issues"},"homepage":"https://github.com/chibicode/react-json-tree","devDependencies":{"babel-cli":"^6.3.17","babel-core":"^6.3.17","babel-eslint":"^4.1.6","babel-loader":"^6.2.0","babel-plugin-transform-decorators-legacy":"^1.3.3","babel-preset-es2015-loose":"^6.1.3","babel-preset-stage-0":"^6.3.13","babel-preset-react":"^6.3.13","eslint":"^0.23","eslint-config-airbnb":"0.0.6","eslint-plugin-react":"^2.3.0","expect":"^1.6.0","isparta":"^3.0.3","mocha":"^2.2.5","rimraf":"^2.3.4"},"peerDependencies":{"react":"^0.14.0"},"dependencies":{"babel-plugin-transform-runtime":"^6.5.0","babel-runtime":"^6.3.13","react-mixin":"^1.7.0"},"gitHead":"f98e5685fe27ceed626bb85065edde839d0bad09","_id":"@alexkuz/react-json-tree@0.5.3","_shasum":"23117a9b0d2e0aa2e85be980d7fbe4e697fb136a","_from":".","_npmVersion":"2.14.5","_nodeVersion":"3.3.1","_npmUser":{"name":"alexkuz","email":"alexkuz@gmail.com"},"maintainers":[{"name":"alexkuz","email":""}],"dist":{"shasum":"23117a9b0d2e0aa2e85be980d7fbe4e697fb136a","size":10404,"noattachment":false,"key":"/@alexkuz/react-json-tree/-/@alexkuz/react-json-tree-0.5.3.tgz","tarball":"http://registry.cnpm.dingdandao.com/@alexkuz/react-json-tree/download/@alexkuz/react-json-tree-0.5.3.tgz"},"_npmOperationalInternal":{"host":"packages-6-west.internal.npmjs.com","tmp":"tmp/react-json-tree-0.5.3.tgz_1456174913592_0.05743361241184175"},"directories":{},"publish_time":1456174919275,"_hasShrinkwrap":false,"_cnpm_publish_time":1456174919275,"_cnpmcore_publish_time":"2021-12-17T00:05:28.016Z"}},"readme":"# react-json-tree\n\nReact JSON Viewer Component, Extracted from [redux-devtools](https://github.com/gaearon/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![](https://img.shields.io/npm/v/react-json-tree.svg)\n\n### Usage\n\n```js\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![](http://cl.ly/image/3f2C2k2t3D0o/screenshot%202015-08-26%20at%2010.24.12%20AM.png)\n\nCheck out [examples](examples) directory for more details.\n\n### Theming\n\nYou can pass a `theme` prop containing [base16](http://chriskempson.github.io/base16) theme data to change the theme. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).\n\n(The theme data is also used by [redux-devtools](https://github.com/gaearon/redux-devtools), and extracting it to a separate npm package is a TODO).\n\n```js\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![](http://cl.ly/image/330o2L1J3V0h/screenshot%202015-08-26%20at%2010.48.24%20AM.png)\n\n### Customization\n\n#### Customize CSS\n\nYou can pass the following properties to customize styling (all optional):\n\n```js\n ({})}\n getItemStringStyle={(type, expanded) => ({})}\n getListStyle={(type, expanded) => ({})}\n getLabelStyle={(type, expanded) => ({})}\n getValueStyle={(type, expanded) => ({})} />\n```\n\nHere `type` is a string representing type of data, `expanded` is a current state for expandable items. Each function returns a style object, which extends corresponding default style.\n\nFor example, if you pass the following function:\n\n```js\nconst getStyle = (type, expanded) =>\n (expanded ? { textTransform: 'uppercase' } :\n { textTransform: 'lowercase' });\n```\n\nThen expanded nodes will all be in uppercase:\n\n![](http://cl.ly/image/460Y0P3C453Q/screenshot%202015-10-07%20at%203.38.33%20PM.png)\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```js\n {itemType} {itemString}}\n```\n\nBut if you pass the following:\n\n```js\nconst getItemString = (type, data, itemType, itemString)\n => ( // {type});\n```\n\nThen the preview of child elements now look like this:\n\n![](http://cl.ly/image/1J1a0b0T0K3c/screenshot%202015-10-07%20at%203.44.31%20PM.png)\n\n#### Customize Rendering\n\nYou can pass the following properties to customize rendered labels and values:\n\n```js\n {raw}}\n valueRenderer={raw => {raw}}\n/>\n```\n\nIn this example the label and value will be rendered with `` and `` wrappers respectively.\n\n#### More Options\n\n- Add `expandAll` property to expand all nodes.\n- Add `hideRoot={true}` to hide a root node.\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\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\n### License\n\nMIT\n","_attachments":{},"homepage":"https://github.com/chibicode/react-json-tree","bugs":{"url":"https://github.com/chibicode/react-json-tree/issues"},"license":"MIT"}