New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-json-view-lite

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-json-view-lite - npm Package Compare versions

Comparing version 0.0.1 to 0.9.0

dist/DataRenderer.d.ts

8

dist/index.d.ts
/// <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>
[![NPM](https://img.shields.io/npm/v/react-json-view-lite.svg)](https://www.npmjs.com/package/react-json-view-lite) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](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://badgen.net/bundlephobia/min/react-json-view-lite?color=6ead0a&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![](https://badgen.net/bundlephobia/minzip/react-json-view-lite?color=6ead0a&label=)](https://bundlephobia.com/result?p=react-json-view-lite) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view-lite?color=6ead0a&label=)](https://bundlephobia.com/result?p=react-json-view-lite) |
| react-json-pretty | [![](https://badgen.net/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![](https://badgen.net/bundlephobia/minzip/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty) |
| react-json-inspector | [![](https://badgen.net/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![](https://badgen.net/bundlephobia/minzip/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector) |
| react-json-tree | [![](https://badgen.net/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![](https://badgen.net/bundlephobia/minzip/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree) |
| react-json-view | [![](https://badgen.net/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) | [![](https://badgen.net/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view) |
| react-json-tree-viewer | [![](https://badgen.net/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![](https://badgen.net/bundlephobia/minzip/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer) | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree-viewer?color=red&label=)](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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc