@uiw/react-json-view - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "JSON viewer for react.",
@@ -48,5 +48,8 @@ "main": "cjs/index.js",
   "files": [
+    "dark.d.ts",
+    "light.d.ts",
+    "triangle-arrow.d.ts",
+    "triangle-solid-arrow.d.ts",
     "cjs",
-    "esm",
-    "src"
+    "esm"
   ],
@@ -53,0 +56,0 @@ "keywords": [

README.md

@@ -9,6 +9,16 @@ react-json-view
 
+<!--rehype:ignore:start-->
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
+</a>
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
+</a>
+
+<!--rehype:ignore:end-->
+
 ## Features
 
 📚 Use Typescript to write, better code hints.  
-🎨 Support theme customization  
+🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
@@ -125,2 +135,86 @@
 
+## Online Editing Theme
+
+Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
+
+```tsx mdx:preview
+import React, { useState, useRef } from 'react';
+import Colorful from '@uiw/react-color-colorful';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  bigint: 10086n,
+  null: null,
+  undefined,
+  timer: 0,
+  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
+  array: [19, 100.86, 'test', NaN, Infinity],
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  string_number: '1234',
+}
+const customTheme = {
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-info-color': '#656565',
+
+  '--w-rjv-curlybraces-color': '#d4d4d4',
+  '--w-rjv-brackets-color': '#d4d4d4',
+
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#559bd4',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75',
+};
+
+export default function Demo() {
+  const [cssvar, setCssvar] = useState('--w-rjv-background-color');
+  const [hex, setHex] = useState("#1e1e1e");
+  const [theme, setTheme] = useState(customTheme);
+  const onChange = ({ hexa }) => {
+    const value = cssvar === '--w-rjv-border-left' ? `1px solid ${hexa}` : hexa;
+    setHex(hexa);
+    setTheme({ ...theme, [cssvar]: value });
+  };
+  return (
+    <React.Fragment>
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <JsonView value={object} keyName="root" style={{ flex: 1, ...theme }} />
+        <div>
+          <Colorful color={hex} onChange={onChange} />
+          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+            {Object.keys(customTheme).map((varname, idx) => {
+              const click = () => setCssvar(varname);
+              const active = cssvar === varname ? '#a8a8a8' : '';
+              return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
+            })}
+          </div>
+        </div>
+      </div>
+      Copy the theme configuration below into your project.
+      <pre>
+        {JSON.stringify(theme, null, 2)}
+      </pre>
+    </React.Fragment>
+  )
+}
+```
 ## Render
@@ -127,0 +221,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

432

increased by27.81%

Worsened metrics

Total package byte prevSize

69523

decreased by-13.76%

Number of package files

38

decreased by-9.52%

Lines of code

1627

decreased by-21.67%

No dependency changes