Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/AnyRoad/react-json-view-lite
Lightweight Json view component for React
https://github.com/AnyRoad/react-json-view-lite
Last synced: 3 months ago
JSON representation
Lightweight Json view component for React
- Host: GitHub
- URL: https://github.com/AnyRoad/react-json-view-lite
- Owner: AnyRoad
- Created: 2020-11-08T14:08:51.000Z (about 4 years ago)
- Default Branch: release
- Last Pushed: 2024-05-01T11:59:45.000Z (9 months ago)
- Last Synced: 2024-07-19T09:14:39.661Z (6 months ago)
- Language: TypeScript
- Size: 7.17 MB
- Stars: 136
- Watchers: 2
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- my-awesome-list - react-json-view-lite
README
react-json-view-lite is a tiny component for React allowing to render JSON as a tree. It focused on the balance between performance for large JSON inputs and functionality. It might not have all the rich features (suce as customization, copy, json editinng) but still provides more than just rendering json with highlighting - e.g. ability to collapse/expand nested objects and override css. It is written in TypeScript and has no dependencies.
## Install
```bash
npm install --save react-json-view-lite
```
## Version 2.x.x
Versions 2.x.x supports only React 18 and later. Please use 1.5.0 if your project uses React 16 or 17.
Also version 2 provides better a11y support, collapsing/expanding and navigation through nested elements using arrow keys ("Space" button does not collapse/expand element anymore), but library size increased about 20%.
If your project uses custom styles you might need to update the css for the `basicChildStyle` property like below:
```css
.basic-child-style > ul {
margin: 0;
padding: 0;
}
```
because implementation uses `ul` element `div` instead of the elemenent according to the [w3.org example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/).
## Migration from the 0.9.x versions
1. Property `shouldInitiallyExpand` has different name `shouldExpandNode` in order to emphasize that it will be called every time properties change.
2. If you use custom styles:
- `pointer` and `expander` are no longer used
- component uses `collapseIcon`, `expandIcon`, `collapsedContent` styles in order to customize expand/collapse icon and collpased content placeholder which were previously hardcode to the `▸`, `▾` and `...`.
Default style values use `::after` pseudo-classes to set the content.
## Usage
```tsx
import * as React from 'react';
import { JsonView, allExpanded, darkStyles, defaultStyles } from 'react-json-view-lite';
import 'react-json-view-lite/dist/index.css';
const json = {
a: 1,
b: 'example'
};
const App = () => {
return (
);
};
export default App;
```
Please note that in JavaScript, an anonymous function like `function() {}` or `() => {}` always creates a different function every time component is rendered, so you might need to use
[useCallback](https://react.dev/reference/react/useCallback) React Hook for the `shouldExpandNode` parameter or extract the function outside the functional component.
### StoryBook
https://anyroad.github.io/react-json-view-lite/
### Props
| Name | Type | Default Value | Description |
| ----------------- | -------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data | `Object` \| `Array` | | Data which should be rendered |
| style | StyleProps | defaultStyles | Optional. CSS classes for rendering. Library provides two build-in implementations: `darkStyles`, `defaultStyles` (see below) |
| shouldExpandNode | `(level: number, value: any, field?: string) => boolean` | allExpanded | Optional. Function which will be called during initial rendering for each Object and Array of the data in order to calculate should if this node be expanded. **Note** that this function will be called again to update the each node state once the property value changed. `level` startes from `0`, `field` does not have a value for the array element. Library provides two build-in implementations: `allExpanded` and `collapseAllNested` (see below) |
| clickToExpandNode | boolean | false | Optional. Set to true if you want to expand/collapse nodes by clicking on the node itself. |
### Extra exported
| Name | Type | Description |
| ----------------- | ---------------------------- | --------------------------------------------------- |
| defaultStyles | StyleProps | Default styles for light background |
| darkStyles | StyleProps | Default styles for dark background |
| allExpanded | `() => boolean` | Always returns `true` |
| collapseAllNested | `(level: number) => boolean` | Returns `true` only for the first level (`level=0`) |
### 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 |
| collapseIcon | string | CSS class name for rendering button collapsing Object and Array nodes. Default content is `▾`. |
| expandIcon | string | CSS class name for rendering button expanding Object and Array nodes. Default content is `▸`. |
| collapsedContent | string | CSS class name for rendering placeholder when Object and Array nodes are collapsed. Default contents is `...`. |
| label | string | CSS class name for rendering property names |
| clickableLabel | string | CSS class name for rendering clickable property names (requires the `clickToExpandNode` prop to be true) |
| 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 `,`, `[`, `]`, `{`, `}` |
| noQuotesForStringValues | boolean | whether or not to add double quotes when rendering string values, default value is `false` |
| quotesForFieldNames | boolean | whether or not to add double quotes when rendering field names, default value is `false` |
## Comparison with other libraries
### Size and dependencies
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):
| Library | 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) |
### Performance
Performance was mesaured using the [react-component-benchmark](https://github.com/paularmstrong/react-component-benchmark) library. Every component was rendered 50 times using the [300Kb json file](https://github.com/AnyRoad/react-json-view-lite-benchmark/blob/main/src/hugeJson.json) as data source, please refer to source code of the [benchmark project](https://github.com/AnyRoad/react-json-view-lite-benchmark).
All numbers are in milliseconds. Tests were performed on Macbook Air M1 16Gb RAM usging Chrome v96.0.4664.110(official build, arm64). Every component was tested 2 times but there was no significant differences in the results.
| Library | Min | Max | Average | Median | P90 |
| ------------------------ | ----- | ----- | ------- | ------ | ----- |
| **react-json-view-lite** | 81 | 604 | 195 | 82 | 582 |
| react-json-pretty | 22 | 59 | 32 | 24 | 56 |
| react-json-inspector | 682 | 1 109 | 758 | 711 | 905 |
| react-json-tree | 565 | 1 217 | 658 | 620 | 741 |
| react-json-view | 1 403 | 1 722 | 1529 | 1 540 | 1 631 |
| react-json-tree-viewer | 266 | 663 | 320 | 278 | 455 |
As you can see `react-json-pretty` renders faster than other libraries but it does not have ability to collapse/expand nested objects so it might be good choice if you need just json syntax highlighting.
## License
MIT © [AnyRoad](https://github.com/AnyRoad)