diff --git a/packages/react-json-tree/examples/src/App.tsx b/packages/react-json-tree/examples/src/App.tsx
index a972ce58..67b7d1c3 100644
--- a/packages/react-json-tree/examples/src/App.tsx
+++ b/packages/react-json-tree/examples/src/App.tsx
@@ -190,7 +190,7 @@ const App = () => (
Sort object keys with sortObjectKeys
prop.
diff --git a/packages/react-json-tree/src/expandCollapseButtons.tsx b/packages/react-json-tree/src/expandCollapseButtons.tsx
index bcaab8f9..0f140e26 100644
--- a/packages/react-json-tree/src/expandCollapseButtons.tsx
+++ b/packages/react-json-tree/src/expandCollapseButtons.tsx
@@ -2,9 +2,11 @@ import {
faArrowDown,
faArrowRight,
faUndo,
+ faCopy,
+ faCheck,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useState } from 'react';
import { ExpandCollapseAll } from '.';
import { useExpandCollapseAllContext } from './expandCollapseContext';
import { StylingFunction } from 'react-base16-styling';
@@ -12,6 +14,7 @@ import { StylingFunction } from 'react-base16-styling';
interface Props {
expandCollapseAll: ExpandCollapseAll;
styling: StylingFunction;
+ value: unknown;
}
interface ExpandButtonProps {
@@ -24,11 +27,17 @@ interface CollapseButtonProps {
collapseIcon?: ReactNode;
}
+interface CopyToClipboardButtonProps {
+ copyToClipboardIcon?: ReactNode;
+ copiedToClipboardIcon?: ReactNode;
+ value: unknown;
+}
+
interface DefaultButtonProps {
defaultIcon?: ReactNode;
}
-function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) {
+function ExpandCollapseButtons({ expandCollapseAll, styling, value }: Props) {
const { enableDefaultButton } = useExpandCollapseAllContext();
const expandableDefaultValue = expandCollapseAll?.defaultValue || 'expand';
@@ -39,6 +48,12 @@ function ExpandCollapseButtons({ expandCollapseAll, styling }: Props) {
)}
+
+
>;
}
+function CopyToClipboardButton({copyToClipboardIcon, copiedToClipboardIcon, value}:CopyToClipboardButtonProps) {
+ const [isCopied, setIsCopied] = useState(false);
+
+ const handleOnCopyToClipboard = async () => {
+ await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+ setIsCopied(true)
+ }
+
+ if(isCopied){
+ return (
+ {copiedToClipboardIcon || }
+
);
+ }
+
+ return (
+
+ {copyToClipboardIcon || }
+
)
+}
+
function DefaultButton({ defaultIcon }: DefaultButtonProps) {
const { setExpandAllState, setEnableDefaultButton } =
useExpandCollapseAllContext();
@@ -122,8 +157,6 @@ function DefaultButton({ defaultIcon }: DefaultButtonProps) {
{defaultIcon || }
);
-
- return <>>;
}
export default ExpandCollapseButtons;
diff --git a/packages/react-json-tree/src/expandCollapseContext.tsx b/packages/react-json-tree/src/expandCollapseContext.tsx
index d1258ef5..0fbc8bf9 100644
--- a/packages/react-json-tree/src/expandCollapseContext.tsx
+++ b/packages/react-json-tree/src/expandCollapseContext.tsx
@@ -20,6 +20,7 @@ interface Props {
children: ReactNode;
expandCollapseAll?: ExpandCollapseAll;
styling: StylingFunction;
+ value: unknown;
}
const ExpandCollapseAllContext = createContext