Custom CopyComponet and CopiedComponent

src/components/copy-button.tsx

@@ -4,27 +4,32 @@ import { ReactComponent as CopiedSVG } from '../svgs/copied.svg'
 import { JsonViewContext } from './json-view'
 
 export default function CopyButton({ node }: { node: any }) {
-	const { customizeCopy } = useContext(JsonViewContext)
+	const { customizeCopy, CopyComponent, CopidComponent } = useContext(JsonViewContext)
 
 	const [copied, setCopied] = useState(false)
 
-	return copied ? (
-		<CopiedSVG className='json-view--copy' style={{ display: 'inline-block' }} />
-	) : (
-		<CopySVG
-			onClick={event => {
-				event.stopPropagation()
+	const copyHandler = (event: React.MouseEvent) => {
+		event.stopPropagation()
+
+		const value = customizeCopy(node)
 
-				const value = customizeCopy(node)
+		if (typeof value === 'string' && value) {
+			navigator.clipboard.writeText(value)
+		}
 
-				if (typeof value === 'string' && value) {
-					navigator.clipboard.writeText(value)
-				}
+		setCopied(true)
+		setTimeout(() => setCopied(false), 3000)
+	}
 
-				setCopied(true)
-				setTimeout(() => setCopied(false), 3000)
-			}}
-			className='json-view--copy'
-		/>
+	return copied ? (
+		typeof CopidComponent === 'function' ? (
+			<CopidComponent className='json-view--copy' style={{ display: 'inline-block' }} />
+		) : (
+			<CopiedSVG className='json-view--copy' style={{ display: 'inline-block' }} />
+		)
+	) : typeof CopyComponent === 'function' ? (
+		<CopyComponent onClick={copyHandler} className='json-view--copy' />
+	) : (
+		<CopySVG onClick={copyHandler} className='json-view--copy' />
 	)
 }

src/components/json-view.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useEffect, useState } from 'react'
+import { ReactElement, createContext, useCallback, useEffect, useState } from 'react'
 import JsonNode from './json-node'
 import type { Collapsed, CustomizeCollapseStringUI, CustomizeNode, DisplaySize, Editable } from '../types'
 import { stringifyForCopying } from '../utils'
@@ -44,7 +44,16 @@ export const JsonViewContext = createContext({
 	matchesURL: false,
 	urlRegExp: defaultURLRegExp,
 
-	ignoreLargeArray: false
+	ignoreLargeArray: false,
+
+	CopyComponent: undefined as
+		| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
+		| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
+		| undefined,
+	CopidComponent: undefined as
+		| React.FC<{ className: string; style: React.CSSProperties }>
+		| React.Component<{ className: string; style: React.CSSProperties }>
+		| undefined
 })
 
 export interface JsonViewProps {
@@ -80,6 +89,11 @@ export interface JsonViewProps {
 	urlRegExp?: RegExp
 
 	ignoreLargeArray?: boolean
+
+	CopyComponent?:
+		| React.FC<{ onClick: (event: React.MouseEvent) => void; className: string }>
+		| React.Component<{ onClick: (event: React.MouseEvent) => void; className: string }>
+	CopidComponent?: React.FC<{ className: string; style: React.CSSProperties }> | React.Component<{ className: string; style: React.CSSProperties }>
 }
 
 export default function JsonView({
@@ -114,7 +128,10 @@ export default function JsonView({
 	matchesURL = false,
 	urlRegExp = defaultURLRegExp,
 
-	ignoreLargeArray = false
+	ignoreLargeArray = false,
+
+	CopyComponent,
+	CopidComponent
 }: JsonViewProps) {
 	const [_, update] = useState(0)
 	const forceUpdate = useCallback(() => update(state => ++state), [])
@@ -151,7 +168,10 @@ export default function JsonView({
 				matchesURL,
 				urlRegExp,
 
-				ignoreLargeArray
+				ignoreLargeArray,
+
+				CopyComponent,
+				CopidComponent
 			}}>
 			<code
 				className={'json-view' + (dark ? ' dark' : '') + (theme && theme !== 'default' ? ' json-view_' + theme : '') + (className ? ' ' + className : '')}

src/stories/editable.stories.tsx

@@ -299,3 +299,27 @@ export const LargeArray: StoryObj<TYPE_FC> = {
 		collapsed: 2
 	}
 }
+
+export const CustomIcons: StoryObj<TYPE_FC> = {
+	args: {
+		src: {
+			obj: {
+				k1: 123,
+				k2: '123',
+				k3: false
+			}
+		},
+		editable: true,
+		displaySize: true,
+		CopyComponent: ({ onClick, className }) => (
+			<svg onClick={onClick} className={className} height='512' viewBox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'>
+				<path d='m15 20h-10a5.006 5.006 0 0 1 -5-5v-10a5.006 5.006 0 0 1 5-5h10a5.006 5.006 0 0 1 5 5v10a5.006 5.006 0 0 1 -5 5zm9-1v-13a1 1 0 0 0 -2 0v13a3 3 0 0 1 -3 3h-13a1 1 0 0 0 0 2h13a5.006 5.006 0 0 0 5-5z' />
+			</svg>
+		),
+		CopidComponent: ({ className, style }) => (
+			<svg className={className} style={style} xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 512 512' width='512' height='512'>
+				<path d='M405.333,0H106.667C47.786,0.071,0.071,47.786,0,106.667v298.667C0.071,464.214,47.786,511.93,106.667,512h298.667   C464.214,511.93,511.93,464.214,512,405.333V106.667C511.93,47.786,464.214,0.071,405.333,0z M426.667,172.352L229.248,369.771   c-16.659,16.666-43.674,16.671-60.34,0.012c-0.004-0.004-0.008-0.008-0.012-0.012l-83.563-83.541   c-8.348-8.348-8.348-21.882,0-30.229s21.882-8.348,30.229,0l83.541,83.541l197.44-197.419c8.348-8.318,21.858-8.294,30.176,0.053   C435.038,150.524,435.014,164.034,426.667,172.352z' />
+			</svg>
+		)
+	}
+}

src/stories/json-view.stories.tsx

@@ -486,3 +486,26 @@ export const LargeArray: StoryObj<TYPE_FC> = {
 		displaySize: true
 	}
 }
+
+export const CustomIcons: StoryObj<TYPE_FC> = {
+	args: {
+		src: {
+			obj: {
+				k1: 123,
+				k2: '123',
+				k3: false
+			}
+		},
+		displaySize: true,
+		CopyComponent: ({ onClick, className }) => (
+			<svg onClick={onClick} className={className} height='512' viewBox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'>
+				<path d='m15 20h-10a5.006 5.006 0 0 1 -5-5v-10a5.006 5.006 0 0 1 5-5h10a5.006 5.006 0 0 1 5 5v10a5.006 5.006 0 0 1 -5 5zm9-1v-13a1 1 0 0 0 -2 0v13a3 3 0 0 1 -3 3h-13a1 1 0 0 0 0 2h13a5.006 5.006 0 0 0 5-5z' />
+			</svg>
+		),
+		CopidComponent: ({ className, style }) => (
+			<svg className={className} style={style} xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 512 512' width='512' height='512'>
+				<path d='M405.333,0H106.667C47.786,0.071,0.071,47.786,0,106.667v298.667C0.071,464.214,47.786,511.93,106.667,512h298.667   C464.214,511.93,511.93,464.214,512,405.333V106.667C511.93,47.786,464.214,0.071,405.333,0z M426.667,172.352L229.248,369.771   c-16.659,16.666-43.674,16.671-60.34,0.012c-0.004-0.004-0.008-0.008-0.012-0.012l-83.563-83.541   c-8.348-8.348-8.348-21.882,0-30.229s21.882-8.348,30.229,0l83.541,83.541l197.44-197.419c8.348-8.318,21.858-8.294,30.176,0.053   C435.038,150.524,435.014,164.034,426.667,172.352z' />
+			</svg>
+		)
+	}
+}