refactor: refactor components.value props.

Author: jaywcjlove

core/README.md

@@ -249,7 +249,7 @@ export default function Demo() {
       displayDataTypes={false}
       style={{
         '--w-rjv-background-color': '#ffffff',
-        '--w-rjv-border-left': '0',
+        '--w-rjv-border-left-width': '0',
       }}
       components={{
         braces: () =>  <span />,
@@ -266,6 +266,45 @@ export default function Demo() {
 }
 ```
 
+**Preview Picture**
+
+```tsx mdx:preview
+import React from 'react';
+import JsonView from '@uiw/react-json-view';
+
+const object = {
+  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+}
+
+function value({ type, children, ...props }) {
+  if (type === 'string' && /\.(jpg)$/.test(children)) {
+    return (
+      <span {...props}>
+        <img src={children} height="36" />
+      </span>
+    );
+  }
+}
+
+export default function Demo() {
+  return (
+    <JsonView
+      value={object}
+      keyName="root"
+      // quotes=""
+      displayObjectSize={false}
+      displayDataTypes={false}
+      style={{
+        '--w-rjv-background-color': '#ffffff',
+      }}
+      components={{ value }}
+    />
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.
@@ -433,7 +472,7 @@ Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com))
 | react-json-tree-viewer | [![](https://img.shields.io/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![](https://img.shields.io/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=&t=123)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/nsisodiya/react-json-viewer?style=flat&label=last)](https://github.com/nsisodiya/react-json-viewer/commits) |
 | react-domify | [![](https://img.shields.io/bundlephobia/min/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://img.shields.io/bundlephobia/minzip/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://badgen.net/bundlephobia/dependency-count/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![GitHub last commit](https://img.shields.io/github/last-commit/JedWatson/react-domify?style=flat&label=last)](https://github.com/JedWatson/react-domify/commits) |
 | react18-json-view | [![](https://img.shields.io/bundlephobia/min/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/YYsuni/react18-json-view?style=flat&label=last)](https://github.com/YYsuni/react18-json-view/commits) |
-| @textea/json-viewer | [![](https://img.shields.io/bundlephobia/min/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://img.shields.io/bundlephobia/minzip/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://badgen.net/bundlephobia/dependency-count/%40textea%2Fjson-viewer?color=red&label=&t=vvv12213)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/uiwjs/json-viewer?style=flat&label=last)](https://github.com/uiwjs/json-viewer/commits) |
+| @textea/json-viewer | [![](https://img.shields.io/bundlephobia/min/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://img.shields.io/bundlephobia/minzip/@textea/json-viewer?color=red&label=)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![](https://badgen.net/bundlephobia/dependency-count/%40textea%2Fjson-viewer?color=red&label=&t=vvv12213)](https://bundlephobia.com/result?p=@textea/json-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/TexteaInc/json-viewer?style=flat&label=last)](https://github.com/TexteaInc/json-viewer/commits) |
 
 ## Development
 

core/src/node.tsx

@@ -166,7 +166,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
         {tools}
       </Line>
       {expand && (
-        <Line style={{ borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
+        <Line style={{ borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
           {nameKeys.length > 0 &&
             nameKeys.map((key, idx) => {
               const item = value[key];

core/src/value.tsx

@@ -119,14 +119,14 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
   }
 
   if (content && typeof content === 'string') {
-    const valueView = renderValue ? (
-      renderValue({
-        className: 'w-rjv-value',
-        style: { color, ...style },
-        type,
-        children: content,
-      })
-    ) : (
+    const reView = renderValue && renderValue({
+      className: 'w-rjv-value',
+      style: { color, ...style },
+      type,
+      content,
+      children: (value as string),
+    });
+    const valueView = reView ? reView : (
       <Label color={color} style={style} className="w-rjv-value">
         {content}
       </Label>