npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react18-json-view

v0.2.9-canary.9

Published

JSON viewer for react18

Downloads

224,671

Readme

React18 JSON View

React function component for displaying javascript arrays and JSON objects. Supports all JS types.

Website, Storybook,Online

JSON View

Installation

npm i react18-json-view
npm i react18-json-view@canary

Usage

import JsonView from 'react18-json-view'
import 'react18-json-view/src/style.css'
// If dark mode is needed, import `dark.css`.
// import 'react18-json-view/src/dark.css'

<JsonView src={my_json_object} />

// If needed, you can use the internal stringify function.
// import { stringify } from 'react18-json-view'

Props

| Name | Type | Default | Description | |:-------------------------------------------------------------------| :---------------------------------------------------------------------------------------------------- |:----------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | src | JSON Object | None | This property contains your input JSON | | className | string | None | The CSS class name(s) to apply to the component. | | style | JSON Object | None | An object containing custom style rules to apply to the component. | | dark | boolean | false | Keep in dark mode (Don't forget to import dark.css) | | theme | default | a11y | github | vscode | atom|winter-is-coming | 'default' | Color theme | | enableClipboard | boolean | true | Whether enable clipboard feature. | | matchesURL | boolean | true | Show the link icon if value is string and matches URL regex pattern. | | urlRegExp | RegExp | /^(((ht\|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/ | URL RegExp pattern. | | displaySize | boolean | integer | 'collapsed' | 'expanded' | false | Whether display the size of Object, Array. | | displayArrayIndex (canary) | boolean | true | Whether display the index of Array. | | collapseStringsAfterLength | integer | 99 | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. | | customizeCollapseStringUI | (str_show: string, truncated: boolean) => (JSX.Element \| string) | string | - | Customize the collapse string UI. | | ignoreLargeArray | boolean | false | Prevent collapsing large array(length > 100) behavior since v0.2.7 | | collapseStringMode | 'directly' | 'word' | 'address' | 'directly' | If the word is assigned, the collapsed length will be adjusted to fully display the last word. | | collapsed | boolean | integer | function | false | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function. | | onCollapse | function | - | (params: { isCollapsing: boolean, node: Record<string, any> \| Array<any>, indexOrName: string \| number \| undefined, depth: number }) => void | | collapseObjectsAfterLength | integer | 99 | When an integer value is assigned, the object and array will initially collapse. | | editable | boolean | {add?: boolean, edit?: boolean, delete?: boolean} | false | When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available. | | onAdd | function | - | (params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void | | onDelete | function | - | (params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void | | onEdit | function | - | (params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void | | customizeNode | ReactElement|ReactComponent|Options | - | Highly customize every node. | | customizeCopy | (node: any) => any | internal stringify | Customize copy behavior, only the returned non-empty string will be written to clipboard. | | CopyComponent / DoneComponent / CancelComponent (canary) | React.FC / React.Component <{ onClick: (event: React.MouseEvent) => void; className: string ; style: React.CSSProperties}> | - | Customize copy icon. | | CopiedComponent (canary) | React.FC / React.Component <{ className: string; style: React.CSSProperties }> | - | Customize copied icon. | | CustomOperation (canary) | React.FC / React.Component <{ node: any }> | - | Custom Operation |

Collapsed function

(params: {
    node: Record<string, any> | Array<any> // Object or array
    indexOrName: number | string | undefined
    depth: number
    size: number // Object's size or array's length
  }) => boolean

Editable options

{
  add?: boolean
  edit?: boolean
  delete?: boolean
}

canary: onEdit, OnDelete, onAdd and OnChange add parentPath field, allow us to correctly indicate which field in the JSON is being edited.

CustomizeNode

(params: { node: any; indexOrName: number | string | undefined; depth: number }) =>
  | {
    add?: boolean
    edit?: boolean
    delete?: boolean
    enableClipboard?: boolean
    collapsed?: boolean
    className?: string
  }
  | React.FC
  | typeof React.Component
  | React.ReactElement<any, any>

Editable

How to generate object/array

The editor uses eval(<input-value>). While in edit mode, you can enter ({}) or ([]), which will cause the result of eval to become a new object or array.

{} and [] will be auto convert to ({}),([])

canary: eval => JSON.parse

How the editor works

This component does not perform any cloning operations, so every step of the operation is carried out on the original object. If cloning is required, please handle it yourself.

Edit keyboard shortcuts

When element is editable:

  • Ctrl/Cmd+Click => Edit Mode
  • Enter => Submit
  • Esc => Cancel

Custom themes

Below are the default theme variables that you can easily customize to fit your needs.

.json-view {
  color: #4d4d4d;
  --json-property: #009033;
  --json-index: #676dff;
  --json-number: #676dff;
  --json-string: #b2762e;
  --json-boolean: #dc155e;
  --json-null: #dc155e;
}
.json-view .json-view--property { color: var(--json-property); }
.json-view .json-view--index { color: var(--json-index); }
.json-view .json-view--number { color: var(--json-number); }
.json-view .json-view--string { color: var(--json-string); }
.json-view .json-view--boolean { color: var(--json-boolean); }
.json-view .json-view--null { color: var(--json-null); }

Why

react-json-view does not support React 18.

Todo

  • [x] copy (enableClipboard)
  • [x] css
  • [x] collapse at a particular depth (collapsed)
  • [x] editable
    • [x] add
    • [x] edit
    • [x] delete
    • [x] onChange
    • [ ] onSelect
  • [x] dark mode
  • [ ] custom icon
    • [x] export default icons
  • [x] more usability/scenarios
  • [ ] gif guide
  • [x] more color themes(dark)
  • [x] collapse objects callback
  • [x] editable option
  • [x] advance customization
    • [ ] access internal actions
  • [ ] map/set viewer
  • [ ] display data type
  • [x] display object size
  • [ ] handle circle loop
  • [x] redesign docs
  • [x] truncate long strings
  • [ ] custom stringify
  • [x] split large array
  • tree?