Gathering detailed insights and metrics for @textea/json-viewer
Gathering detailed insights and metrics for @textea/json-viewer
Installations
npm install @textea/json-viewerScore
82.1
Supply Chain
89.8
Quality
81.9
Maintenance
100
Vulnerability
99.6
License
Releases
79
json-viewer: v4.0.0
json-viewer-v4.0.0
Published on 18 Sept 2024
json-viewer: v3.5.0
json-viewer-v3.5.0
Published on 26 Aug 2024
json-viewer: v3.4.1
json-viewer-v3.4.1
Published on 06 Apr 2024
json-viewer: v3.4.0
json-viewer-v3.4.0
Published on 15 Feb 2024
json-viewer: v3.3.2
json-viewer-v3.3.2
Published on 09 Feb 2024
json-viewer: v3.3.1
json-viewer-v3.3.1
Published on 25 Jan 2024
Developer
Developer Guide
BETA
Module System
CommonJS, ESM
Min. Node Version
Typescript Support
Yes
Node Version
20.10.0
NPM Version
10.2.3
Statistics
463 Stars
506 Commits
37 Forks
2 Watching
9 Branches
22 Contributors
Updated on 27 Nov 2024
Bundle Size
34.26 kB
Minified
11.07 kB
Minified + Gzipped
Languages
TypeScript (96.36%)
JavaScript (3.64%)
Total Downloads
Cumulative downloads
Total Downloads
2,523,447
Last day
-12.3%
5,672
Compared to previous day
Last week
6.3%
34,726
Compared to previous week
Last month
7.7%
142,171
Compared to previous month
Last year
75.8%
1,574,050
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
5
Dev Dependencies
44
@commitlint/cli@commitlint/config-conventional@emotion/react@emotion/styled@mui/material@rollup/plugin-alias@rollup/plugin-commonjs@rollup/plugin-node-resolve@rollup/plugin-replace@swc/core@swc/helpers@testing-library/dom@testing-library/react@types/node@types/react@types/react-dom@typescript-eslint/eslint-plugin@typescript-eslint/parser@vitejs/plugin-react@vitest/coverage-v8eslinteslint-config-standardeslint-plugin-importeslint-plugin-neslint-plugin-promiseeslint-plugin-reacteslint-plugin-react-hookseslint-plugin-simple-import-sorteslint-plugin-unused-importsexpect-typehuskyjsdomlint-stagedpinstprettierreactreact-domrolluprollup-plugin-dtsrollup-plugin-swc3ts-nodetypescriptvitevitest
Versions
@textea/json-viewer
@textea/json-viewer is a React component that can be used to view and display any kind of data, not just JSON.
Json Viewer?
ANY Data Viewer ✅
Features 🚀
- 🦾 100% TypeScript
- 🎨 Customizable: Key, value, editable, copy, select... Anything you can think of!
- 🌈 Theme support: light or dark, or use Base16 themes.
- ⚛️ SSR Ready
- 📋 Copy to Clipboard
- 🔍 Inspect anything:
Object,Array, primitive types, and evenMapandSet. - 📊 Metadata preview: Total items, length of string...
- ✏️ Editor: Comes with an editor for basic types, which you can also customize to fit your use case.
Installation
@textea/json-viewer is using Material-UI as the base component library, so you need to install it and its peer dependencies first.
1npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled
CDN
1<!doctype html> 2<html lang="en"> 3 <body> 4 <div id="json-viewer"></div> 5 <script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script> 6 <script> 7 new JsonViewer({ 8 value: { 9 /* ... */ 10 } 11 }).render('#json-viewer') 12 </script> 13 </body> 14</html>
Usage
Here is a basic example:
1import { JsonViewer } from '@textea/json-viewer' 2 3const object = { 4 /* my json object */ 5} 6const Component = () => <JsonViewer value={object} />
Customization
You can define custom data types to handle data that is not supported out of the box. Here is an example of how to display an image:
1import { JsonViewer, defineDataType } from '@textea/json-viewer' 2 3const object = { 4 image: 'https://i.imgur.com/1bX5QH6.jpg' 5 // ... other values 6} 7 8// Let's define a data type for image 9const imageDataType = defineDataType({ 10 is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'), 11 Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} /> 12}) 13 14const Component = () => <JsonViewer value={object} valueTypes={[imageDataType]} />
Theme
Please refer to Styling and Theming
Contributors
Acknowledge
This package is originally based on mac-s-g/react-json-view.
Also thanks open source projects that make this possible.
Sponsoring services
Netlify lets us distribute the site.
LICENSE
This project is licensed under the terms of the MIT license.
No vulnerabilities found.
No security vulnerabilities found.