diff --git a/components/clipboard-button/index.tsx b/components/clipboard-button/index.tsx index 14d8208e..e7e9b121 100644 --- a/components/clipboard-button/index.tsx +++ b/components/clipboard-button/index.tsx @@ -1,28 +1,25 @@ -import { useCopyToClipboard } from '@wordpress/compose'; +import { useCopyToClipboard, useMergeRefs } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -interface ClipboardButtonProps { +type ButtonProps = React.ComponentProps; + +interface ClipboardButtonProps extends Partial> { /** * The text to copy to the clipboard. */ text: string; - /** - * Boolean to disable the button. - */ - disabled: boolean; - /** * Function to run when the text is successfully copied. */ - onSuccess: Function; + onSuccess?: Function; /** * Labels for the button. */ - labels: ButtonLabels; + labels?: ButtonLabels; } interface ButtonLabels { @@ -39,9 +36,9 @@ interface ButtonLabels { export const ClipboardButton: React.FC = ({ text = '', - disabled = false, onSuccess = () => {}, labels = {}, + ...rest }) => { const [hasCopied, setHasCopied] = useState(false); const copy = labels.copy ? labels.copy : __('Copy'); @@ -77,9 +74,10 @@ export const ClipboardButton: React.FC = ({ } const ref = useCopyToClipboard(text, successfullyCopied); + const mergedRefs = useMergeRefs([ref, (rest.ref as any) || null]); return ( - );