📄 `inputs/CopyButton`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	2
📦 Imports	7
💠 JSX Elements	5
📐 Interfaces	1

📚 Table of Contents¶

Imports
JSX Elements
Functions
Interfaces

🛠️ File Location:¶

📂 packages/website/src/components/inputs/CopyButton.tsx

📦 Imports¶

Name	Source
`CopyIcon`	`@theme/Icon/Copy`
`CheckIcon`	`@theme/Icon/Success`
`clsx`	`clsx`
`React`	`react`
`useClipboard`	`../../hooks/useClipboard`
`styles`	`./CopyButton.module.css`
`Tooltip`	`./Tooltip`

JSX Elements¶

Component	Type	Props	Children
`div`	element	className={styles.copyButtonContainer}
`Tooltip`	component	open={on}, text="Copied"
`button`	element	aria-label={!on ? 'Copy code to clipboard' : 'Copied'}, className={clsx(style...	,
`CopyIcon`	component	className={styles.copyIcon}, height="18", width="18"	none
`CheckIcon`	component	className={styles.checkIcon}, height="18", width="18"	none

Functions¶

`jsonStringifyRecursive(obj: unknown): string`¶

Parameters:

obj unknown

Returns: string

Calls:

JSON.stringify
cache.has
cache.add

Code

function jsonStringifyRecursive(obj: unknown): string {
  const cache = new Set();
  return JSON.stringify(
    obj,
    (key, value: unknown) => {
      if (typeof value === 'object' && value != null) {
        if (cache.has(value)) {
          return;
        }
        cache.add(value);
      }
      return value;
    },
    2,
  );
}

`CopyButton({ className, value }: CopyButtonProps): React.JSX.Element`¶

Parameters:

{ className, value } CopyButtonProps

Returns: React.JSX.Element

Calls:

useClipboard (from ../../hooks/useClipboard)
jsonStringifyRecursive
clsx (from clsx)

Code

function CopyButton({ className, value }: CopyButtonProps): React.JSX.Element {
  const [on, onCopy] = useClipboard(() => jsonStringifyRecursive(value));

  return (
    <div className={styles.copyButtonContainer}>
      <Tooltip open={on} text="Copied">
        <button
          aria-label={!on ? 'Copy code to clipboard' : 'Copied'}
          className={clsx(styles.copyButton, className, 'button')}
          disabled={on}
          onClick={onCopy}
        >
          <CopyIcon className={styles.copyIcon} height="18" width="18" />
          <CheckIcon className={styles.checkIcon} height="18" width="18" />
        </button>
      </Tooltip>
    </div>
  );
}

Interfaces¶

`CopyButtonProps`¶

Interface Code

export interface CopyButtonProps {
  readonly className?: string;
  readonly value: unknown;
}

Properties¶

Name	Type	Optional	Description
`className`	`string`	✓	not shown
`value`	`unknown`	✗	not shown

Generated by Syntax Scribe

📄 inputs/CopyButton¶