react-json-view-lite
Advanced tools
Comparing version 0.0.1 to 0.9.0
/// <reference types="react" /> | ||
import { StyleProps } from './components/DataRenderer'; | ||
import { StyleProps } from './DataRenderer'; | ||
interface Props { | ||
data: any; | ||
style: StyleProps; | ||
data: Object | Array<any>; | ||
style?: StyleProps; | ||
shouldInitiallyExpand?: (level: number, value: any, field?: string) => boolean; | ||
@@ -10,3 +10,3 @@ } | ||
export declare const darkStyles: StyleProps; | ||
export declare const JsonView: ({ data, style, shouldInitiallyExpand, }: Props) => JSX.Element; | ||
export declare const JsonView: ({ data, style, shouldInitiallyExpand }: Props) => JSX.Element; | ||
export {}; |
@@ -33,12 +33,18 @@ var React = require('react'); | ||
function JsonObject(_ref) { | ||
var expandedIcon = "\u25BE"; | ||
var collapsedIcon = "\u25B8"; | ||
function renderExpandableObject(_ref) { | ||
var field = _ref.field, | ||
value = _ref.value, | ||
data = _ref.data, | ||
lastElement = _ref.lastElement, | ||
openBracket = _ref.openBracket, | ||
closeBracket = _ref.closeBracket, | ||
level = _ref.level, | ||
style = _ref.style, | ||
lastElement = _ref.lastElement, | ||
shouldInitiallyExpand = _ref.shouldInitiallyExpand, | ||
level = _ref.level; | ||
shouldInitiallyExpand = _ref.shouldInitiallyExpand; | ||
var _useBool = useBool(function () { | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level || 0, value, field) : true; | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level, value, field) : true; | ||
}), | ||
@@ -48,4 +54,3 @@ expanded = _useBool[0], | ||
var fields = Object.keys(value); | ||
var expandIcon = expanded ? "\u25BE" : "\u25B8"; | ||
var expandIcon = expanded ? expandedIcon : collapsedIcon; | ||
return React.createElement("div", { | ||
@@ -60,9 +65,9 @@ className: style === null || style === void 0 ? void 0 : style.basicChildStyle | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "{"), expanded && React.createElement("div", null, fields.map(function (key, index) { | ||
}, openBracket), expanded && React.createElement("div", null, data.map(function (dataElement, index) { | ||
return React.createElement(DataRender, { | ||
key: key, | ||
field: key, | ||
value: value[key], | ||
key: dataElement[0] || index, | ||
field: dataElement[0], | ||
value: dataElement[1], | ||
style: style, | ||
lastElement: index === fields.length - 1, | ||
lastElement: index === data.length - 1, | ||
level: (level || 0) + 1, | ||
@@ -75,3 +80,3 @@ shouldInitiallyExpand: shouldInitiallyExpand | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "}"), !lastElement && React.createElement("span", { | ||
}, closeBracket), !lastElement && React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
@@ -81,3 +86,3 @@ }, ",")); | ||
function JsonArray(_ref2) { | ||
function JsonObject(_ref2) { | ||
var field = _ref2.field, | ||
@@ -87,44 +92,46 @@ value = _ref2.value, | ||
lastElement = _ref2.lastElement, | ||
level = _ref2.level, | ||
shouldInitiallyExpand = _ref2.shouldInitiallyExpand; | ||
var _useBool2 = useBool(function () { | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level || 0, value, field) : true; | ||
}), | ||
expanded = _useBool2[0], | ||
toggleExpanded = _useBool2[1]; | ||
var expandIcon = expanded ? "\u25BE" : "\u25B8"; | ||
return React.createElement("div", { | ||
className: style === null || style === void 0 ? void 0 : style.basicChildStyle | ||
}, React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.expander, | ||
onClick: toggleExpanded | ||
}, expandIcon), field && React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.label | ||
}, field, ":"), React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "["), expanded && React.createElement("div", null, value.map(function (element, index) { | ||
return React.createElement(DataRender, { | ||
key: index, | ||
value: element, | ||
style: style, | ||
lastElement: index === value.length - 1, | ||
level: (level || 0) + 1, | ||
shouldInitiallyExpand: shouldInitiallyExpand | ||
}); | ||
})), !expanded && React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "..."), React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "]"), !lastElement && React.createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, ",")); | ||
shouldInitiallyExpand = _ref2.shouldInitiallyExpand, | ||
level = _ref2.level; | ||
return renderExpandableObject({ | ||
field: field, | ||
value: value, | ||
lastElement: lastElement || false, | ||
level: level || 0, | ||
openBracket: '{', | ||
closeBracket: '}', | ||
style: style, | ||
shouldInitiallyExpand: shouldInitiallyExpand, | ||
data: Object.keys(value).map(function (key) { | ||
return [key, value[key]]; | ||
}) | ||
}); | ||
} | ||
function JsonPrimitiveValue(_ref3) { | ||
function JsonArray(_ref3) { | ||
var field = _ref3.field, | ||
value = _ref3.value, | ||
style = _ref3.style, | ||
lastElement = _ref3.lastElement; | ||
lastElement = _ref3.lastElement, | ||
level = _ref3.level, | ||
shouldInitiallyExpand = _ref3.shouldInitiallyExpand; | ||
return renderExpandableObject({ | ||
field: field, | ||
value: value, | ||
lastElement: lastElement || false, | ||
level: level || 0, | ||
openBracket: '[', | ||
closeBracket: ']', | ||
style: style, | ||
shouldInitiallyExpand: shouldInitiallyExpand, | ||
data: value.map(function (element) { | ||
return [undefined, element]; | ||
}) | ||
}); | ||
} | ||
function JsonPrimitiveValue(_ref4) { | ||
var field = _ref4.field, | ||
value = _ref4.value, | ||
style = _ref4.style, | ||
lastElement = _ref4.lastElement; | ||
var stringValue = value; | ||
@@ -131,0 +138,0 @@ var valueStyle = style === null || style === void 0 ? void 0 : style.otherValue; |
@@ -33,12 +33,18 @@ import { useState, createElement } from 'react'; | ||
function JsonObject(_ref) { | ||
var expandedIcon = "\u25BE"; | ||
var collapsedIcon = "\u25B8"; | ||
function renderExpandableObject(_ref) { | ||
var field = _ref.field, | ||
value = _ref.value, | ||
data = _ref.data, | ||
lastElement = _ref.lastElement, | ||
openBracket = _ref.openBracket, | ||
closeBracket = _ref.closeBracket, | ||
level = _ref.level, | ||
style = _ref.style, | ||
lastElement = _ref.lastElement, | ||
shouldInitiallyExpand = _ref.shouldInitiallyExpand, | ||
level = _ref.level; | ||
shouldInitiallyExpand = _ref.shouldInitiallyExpand; | ||
var _useBool = useBool(function () { | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level || 0, value, field) : true; | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level, value, field) : true; | ||
}), | ||
@@ -48,4 +54,3 @@ expanded = _useBool[0], | ||
var fields = Object.keys(value); | ||
var expandIcon = expanded ? "\u25BE" : "\u25B8"; | ||
var expandIcon = expanded ? expandedIcon : collapsedIcon; | ||
return createElement("div", { | ||
@@ -60,9 +65,9 @@ className: style === null || style === void 0 ? void 0 : style.basicChildStyle | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "{"), expanded && createElement("div", null, fields.map(function (key, index) { | ||
}, openBracket), expanded && createElement("div", null, data.map(function (dataElement, index) { | ||
return createElement(DataRender, { | ||
key: key, | ||
field: key, | ||
value: value[key], | ||
key: dataElement[0] || index, | ||
field: dataElement[0], | ||
value: dataElement[1], | ||
style: style, | ||
lastElement: index === fields.length - 1, | ||
lastElement: index === data.length - 1, | ||
level: (level || 0) + 1, | ||
@@ -75,3 +80,3 @@ shouldInitiallyExpand: shouldInitiallyExpand | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "}"), !lastElement && createElement("span", { | ||
}, closeBracket), !lastElement && createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
@@ -81,3 +86,3 @@ }, ",")); | ||
function JsonArray(_ref2) { | ||
function JsonObject(_ref2) { | ||
var field = _ref2.field, | ||
@@ -87,44 +92,46 @@ value = _ref2.value, | ||
lastElement = _ref2.lastElement, | ||
level = _ref2.level, | ||
shouldInitiallyExpand = _ref2.shouldInitiallyExpand; | ||
var _useBool2 = useBool(function () { | ||
return shouldInitiallyExpand ? shouldInitiallyExpand(level || 0, value, field) : true; | ||
}), | ||
expanded = _useBool2[0], | ||
toggleExpanded = _useBool2[1]; | ||
var expandIcon = expanded ? "\u25BE" : "\u25B8"; | ||
return createElement("div", { | ||
className: style === null || style === void 0 ? void 0 : style.basicChildStyle | ||
}, createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.expander, | ||
onClick: toggleExpanded | ||
}, expandIcon), field && createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.label | ||
}, field, ":"), createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "["), expanded && createElement("div", null, value.map(function (element, index) { | ||
return createElement(DataRender, { | ||
key: index, | ||
value: element, | ||
style: style, | ||
lastElement: index === value.length - 1, | ||
level: (level || 0) + 1, | ||
shouldInitiallyExpand: shouldInitiallyExpand | ||
}); | ||
})), !expanded && createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "..."), createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, "]"), !lastElement && createElement("span", { | ||
className: style === null || style === void 0 ? void 0 : style.punctuation | ||
}, ",")); | ||
shouldInitiallyExpand = _ref2.shouldInitiallyExpand, | ||
level = _ref2.level; | ||
return renderExpandableObject({ | ||
field: field, | ||
value: value, | ||
lastElement: lastElement || false, | ||
level: level || 0, | ||
openBracket: '{', | ||
closeBracket: '}', | ||
style: style, | ||
shouldInitiallyExpand: shouldInitiallyExpand, | ||
data: Object.keys(value).map(function (key) { | ||
return [key, value[key]]; | ||
}) | ||
}); | ||
} | ||
function JsonPrimitiveValue(_ref3) { | ||
function JsonArray(_ref3) { | ||
var field = _ref3.field, | ||
value = _ref3.value, | ||
style = _ref3.style, | ||
lastElement = _ref3.lastElement; | ||
lastElement = _ref3.lastElement, | ||
level = _ref3.level, | ||
shouldInitiallyExpand = _ref3.shouldInitiallyExpand; | ||
return renderExpandableObject({ | ||
field: field, | ||
value: value, | ||
lastElement: lastElement || false, | ||
level: level || 0, | ||
openBracket: '[', | ||
closeBracket: ']', | ||
style: style, | ||
shouldInitiallyExpand: shouldInitiallyExpand, | ||
data: value.map(function (element) { | ||
return [undefined, element]; | ||
}) | ||
}); | ||
} | ||
function JsonPrimitiveValue(_ref4) { | ||
var field = _ref4.field, | ||
value = _ref4.value, | ||
style = _ref4.style, | ||
lastElement = _ref4.lastElement; | ||
var stringValue = value; | ||
@@ -131,0 +138,0 @@ var valueStyle = style === null || style === void 0 ? void 0 : style.otherValue; |
@@ -1,1 +0,1 @@ | ||
export {}; | ||
import '@testing-library/jest-dom/extend-expect'; |
{ | ||
"name": "react-json-view-lite", | ||
"version": "0.0.1", | ||
"version": "0.9.0", | ||
"description": "JSON viewer component for React focused on performance for big source data", | ||
@@ -8,4 +8,4 @@ "author": "AnyRoad", | ||
"repository": "AnyRoad/react-json-view-lite", | ||
"keywords": ["React", "json", "viewer", "fast"], | ||
"main": "dist/index.js", | ||
"types": "./dist/index.d.ts", | ||
"module": "dist/index.modern.js", | ||
@@ -19,7 +19,7 @@ "source": "src/index.tsx", | ||
"start": "microbundle-crl watch --no-compress --format modern,cjs", | ||
"prepublish": "run-s build", | ||
"prepare": "run-s build", | ||
"test": "run-s test:unit test:lint test:build", | ||
"test:build": "run-s build", | ||
"test:lint": "eslint .", | ||
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom", | ||
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom --coverage", | ||
"test:watch": "react-scripts test --env=jsdom", | ||
@@ -30,31 +30,42 @@ "predeploy": "cd example && npm install && npm run build", | ||
"peerDependencies": { | ||
"react": "^16.0.0" | ||
"react": "17.0.1" | ||
}, | ||
"resolutions": { | ||
"@typescript-eslint/eslint-plugin": "4.14.0", | ||
"@typescript-eslint/parser": "4.14.0" | ||
}, | ||
"devDependencies": { | ||
"@types/react": "^16.9.27", | ||
"microbundle-crl": "^0.13.8", | ||
"babel-eslint": "^10.0.3", | ||
"cross-env": "^7.0.2", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.7.0", | ||
"eslint-config-standard": "^14.1.0", | ||
"eslint-config-standard-react": "^9.2.0", | ||
"eslint-plugin-import": "^2.18.2", | ||
"eslint-plugin-node": "^11.0.0", | ||
"eslint-plugin-prettier": "^3.1.1", | ||
"eslint-plugin-promise": "^4.2.1", | ||
"eslint-plugin-react": "^7.17.0", | ||
"eslint-plugin-standard": "^4.0.1", | ||
"gh-pages": "^2.2.0", | ||
"npm-run-all": "^4.1.5", | ||
"prettier": "^1.19.1", | ||
"react": "^16.13.1", | ||
"react-dom": "^16.13.1", | ||
"react-scripts": "^3.4.1", | ||
"@types/jest": "^25.2.1" | ||
"@testing-library/jest-dom": "5.11.9", | ||
"@testing-library/react": "11.2.3", | ||
"@testing-library/user-event": "12.6.2", | ||
"@types/jest": "26.0.20", | ||
"@types/node": "^12.12.38", | ||
"@types/react": "17.0.0", | ||
"@types/react-dom": "17.0.0", | ||
"@typescript-eslint/eslint-plugin": "4.14.0", | ||
"@typescript-eslint/parser": "4.14.0", | ||
"babel-eslint": "10.1.0", | ||
"cross-env": "7.0.3", | ||
"eslint": "7.18.0", | ||
"eslint-config-prettier": "7.2.0", | ||
"eslint-config-standard": "16.0.2", | ||
"eslint-config-standard-react": "11.0.1", | ||
"eslint-plugin-import": "2.22.1", | ||
"eslint-plugin-node": "11.1.0", | ||
"eslint-plugin-prettier": "3.3.1", | ||
"eslint-plugin-promise": "4.2.1", | ||
"eslint-plugin-react": "7.22.0", | ||
"eslint-plugin-standard": "5.0.0", | ||
"gh-pages": "3.1.0", | ||
"microbundle-crl": "0.13.11", | ||
"npm-run-all": "4.1.5", | ||
"prettier": "2.2.1", | ||
"react": "17.0.1", | ||
"react-dom": "17.0.1", | ||
"react-scripts": "4.0.1", | ||
"typescript": "3.9.4" | ||
}, | ||
"files": [ | ||
"dist" | ||
], | ||
"dependencies": {} | ||
] | ||
} |
@@ -1,7 +0,32 @@ | ||
# react-json-view-lite | ||
<div align="center"> | ||
<a href="https://npmjs.org/package/react-json-view-lite"> | ||
<img alt="npm" src="https://img.shields.io/npm/v/react-json-view-lite.svg" /> | ||
</a> | ||
<a href="https://npmjs.org/package/react-json-view-lite"> | ||
<img alt="no dependencies" src="https://badgen.net/bundlephobia/dependency-count/react-json-view-lite" /> | ||
</a> | ||
<a href="https://npmjs.org/package/react-json-view-lite"> | ||
<img alt="size" src="https://badgen.net/bundlephobia/minzip/react-json-view-lite" /> | ||
</a> | ||
<a href="https://travis-ci.com/github/AnyRoad/react-json-view-lite"> | ||
<img alt="build" src="https://travis-ci.com/AnyRoad/react-json-view-lite.svg?branch=release" /> | ||
</a> | ||
<a href="https://codecov.io/gh/anyroad/react-json-view-lite"> | ||
<img alt="coverage" src="https://codecov.io/gh/AnyRoad/react-json-view-lite/branch/release/graph/badge.svg" /> | ||
</a> | ||
<a href="https://bundlephobia.com/result?p=react-json-view-lite"> | ||
<img alt="tree-shakeable" src="https://badgen.net/bundlephobia/tree-shaking/react-json-view-lite" /> | ||
</a> | ||
<a href="https://npmjs.org/package/react-json-view-lite"> | ||
<img alt="types included" src="https://badgen.net/npm/types/react-json-view-lite" /> | ||
</a> | ||
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2FAnyRoad%2Freact-json-view-lite?ref=badge_shield" alt="FOSSA Status"> | ||
<img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2FAnyRoad%2Freact-json-view-lite.svg?type=shield"/> | ||
</a> | ||
</div> | ||
> JSON viewer component for React focused on performance for big source data rather than provide a lot of options. | ||
<div> | ||
<strong>react-json-view-lite</strong> is a tiny component for React allowing to render JSON as a tree. It focused more on the performance for large JSON inputs rather than customization and rich features. It is written in TypeScript and has no dependencies. | ||
</div> | ||
[](https://www.npmjs.com/package/react-json-view-lite) [](https://standardjs.com) | ||
## Install | ||
@@ -16,5 +41,5 @@ | ||
```tsx | ||
import React, { Component } from 'react'; | ||
import * as React from 'react'; | ||
import { JsonView } from 'react-json-view-lite'; | ||
import { JsonView, darkStyles, defaultStyles } from 'react-json-view-lite'; | ||
import 'react-json-view-lite/dist/index.css'; | ||
@@ -24,14 +49,60 @@ | ||
a: 1, | ||
b: 2, | ||
b: 'example', | ||
}; | ||
class Example extends JsonView { | ||
render() { | ||
return <JsonView data={json} shouldInitiallyExpand={(level) => true} />; | ||
} | ||
} | ||
const App = () => { | ||
return ( | ||
<React.Fragment> | ||
<JsonView | ||
data={json} | ||
shouldInitiallyExpand={(level) => true} | ||
style={defaultStyles} | ||
/> | ||
<JsonView data={json} shouldInitiallyExpand={(level) => true} style={darkStyles} /> | ||
</React.Fragment> | ||
); | ||
}; | ||
export default App; | ||
``` | ||
### Props | ||
| Name | Type | Default Value | Description | | ||
| --------------------- | -------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| data | `Object` \| `Array<any>` | | Data which should be rendered | | ||
| style | StyleProps | defaultStyles | CSS classes for rendering. Library provides two build-in implementations: darkStyles, defaultStyles | | ||
| shouldInitiallyExpand | `(level: number, value: any, field?: string) => boolean` | undefined | Optional. Function which will be initially called for each Object and Array of the data in order to calculate should if this node be expanded | | ||
### StyleProps | ||
| Name | Type | Description | | ||
| --------------- | ------ | ----------------------------------------------------------------------------------------------------------------- | | ||
| container | string | CSS class name for rendering parent block | | ||
| basicChildStyle | string | CSS class name for property block containing property name and value | | ||
| expander | string | CSS class name for rendering button expanding/collapsing Object and Array nodes | | ||
| label | string | CSS class name for rendering property names | | ||
| nullValue | string | CSS class name for rendering null values | | ||
| undefinedValue | string | CSS class name for rendering undefined values | | ||
| numberValue | string | CSS class name for rendering numeric values | | ||
| stringValue | string | CSS class name for rendering string values | | ||
| booleanValue | string | CSS class name for rendering boolean values | | ||
| otherValue | string | CSS class name for rendering all other values except Object, Arrray, null, undefined, numeric, boolean and string | | ||
| punctuation | string | CSS class name for rendering `,`, `[`, `]`, `{`, `}` | | ||
## Comparison with other libraries | ||
Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by https://www.npmjs.com/search?q=react%20json&ranking=popularity): | ||
| Name | Bundle size | Bundle size (gzip) | Dependencies | | ||
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| **react-json-view-lite** | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | [](https://bundlephobia.com/result?p=react-json-view-lite) | | ||
| react-json-pretty | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | [](https://bundlephobia.com/result?p=react-json-pretty) | | ||
| react-json-inspector | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | [](https://bundlephobia.com/result?p=react-json-inspector) | | ||
| react-json-tree | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | [](https://bundlephobia.com/result?p=react-json-tree) | | ||
| react-json-view | [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | [](https://bundlephobia.com/result?p=react-json-view) | | ||
| react-json-tree-viewer | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | [](https://bundlephobia.com/result?p=react-json-tree-viewer) | | ||
## License | ||
MIT © [AnyRoad](https://github.com/AnyRoad) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
60736
107
29
15
557