feat: add components.copied props.

Author: jaywcjlove

core/README.md

@@ -411,7 +411,7 @@ export default JsonView;
 
 ## 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):
+Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):
 
 | Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
 | ------- | ------- | ------- | ------- | ------- |
@@ -420,8 +420,8 @@ Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com))
 | react-json-pretty | [![](https://img.shields.io/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![GitHub last commit](https://img.shields.io/github/last-commit/chenckang/react-json-pretty?style=flat&label=last)](https://github.com/chenckang/react-json-pretty/commits) |
 | react-json-inspector | [![](https://img.shields.io/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![GitHub last commit](https://img.shields.io/github/last-commit/Lapple/react-json-inspector?style=flat&label=last)](https://github.com/Lapple/react-json-inspector/commits) |
 | react-json-tree | [![](https://img.shields.io/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![GitHub last commit](https://img.shields.io/github/last-commit/reduxjs/redux-devtools?style=flat&label=last)](https://github.com/reduxjs/redux-devtools/commits) |
-| react-json-view | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=last)](https://github.com/mac-s-g/react-json-view/commits) |
-| 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=)](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-json-view | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=last)](https://github.com/mac-s-g/react-json-view/commits) |
+| 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) |
 

core/src/copied.tsx

@@ -1,12 +1,13 @@
-import { useState } from "react";
+import { useState } from 'react';
 
 export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
   show?: boolean;
   text?: T;
+  render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
 }
 
 export function Copied<T>(props: CopiedProps<T>) {
-  const { children, style, text = '', show, ...reset } = props;
+  const { children, style, text = '', render, show, ...reset } = props;
   if (!show) return null;
   const [copied, setCopied] = useState(false);
   const click = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
@@ -32,14 +33,15 @@ export function Copied<T>(props: CopiedProps<T>) {
   };
   const defalutStyle = { ...style, cursor: 'pointer', marginLeft: 5 } as React.CSSProperties;
   const svgProps: React.SVGProps<SVGSVGElement> = {
-    height: "1em", 
-    width: "1em",
-    fill: "var(--w-rjv-copied-color, currentColor)",
+    height: '1em', 
+    width: '1em',
+    fill: 'var(--w-rjv-copied-color, currentColor)',
     onClick: click,
     style: defalutStyle,
     className: 'w-rjv-copied',
     ...reset,
   }
+  if (render) return render({ ...props, ...svgProps });
   if (copied)  {
     return (
       <svg viewBox="0 0 38 38" {...svgProps} fill="var(--w-rjv-copied-success-color, #28a745)">

core/src/index.tsx

@@ -2,10 +2,11 @@ import React, { useId } from 'react';
 import { forwardRef } from 'react';
 import { RooNode, MetaProps, SemicolonProps, EllipsisProps } from './node';
 import { ValueViewProps } from './value';
+import { CopiedProps } from './copied';
 
 export * from './node';
 export * from './value';
-export interface JsonViewProps<T>
+export interface JsonViewProps<T extends object>
   extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   /** This property contains your input JSON */
   value?: T;
@@ -28,6 +29,7 @@ export interface JsonViewProps<T>
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
     value?: ValueViewProps<T>['renderValue'];
+    copied?: CopiedProps<T>['render'];
   };
 }
 

core/src/node.tsx

@@ -78,7 +78,7 @@ export const CountInfo: FC<PropsWithChildren<LabelProps>> = ({ children }) => (
   </Label>
 );
 
-export interface RooNodeProps<T> extends JsonViewProps<T> {
+export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
   keyName?: string | number;
   keyid?: string;
 }
@@ -127,7 +127,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     <TriangleArrow style={arrowStyle} />
   );
   const [showTools, setShowTools] = useState(false);
-  const tools = enableClipboard ? <Copied show={showTools} text={value} /> : undefined;
+  const tools = enableClipboard ? <Copied show={showTools} text={value as T} render={components.copied} /> : undefined;
   const mouseEnter = () => setShowTools(true);
   const mouseLeave = () => setShowTools(false);
   return (