With a clipboard button, users copy text (or other elements) with a single click or tap.
Usage
import { useState } from 'react';
import { ClipboardButton } from '@wordpress/components';
const MyClipboardButton = () => {
const [ hasCopied, setHasCopied ] = useState( false );
return (
<ClipboardButton
variant="primary"
text="Text to be copied."
onCopy={ () => setHasCopied( true ) }
onFinishCopy={ () => setHasCopied( false ) }
>
{ hasCopied ? 'Copied!' : 'Copy Text' }
</ClipboardButton>
);
};
Props
The component accepts the following props:
className
The class that will be added to the classes of the underlying <Button>
component.
- Type:
string
- Required: no
text
The text that will be copied to the clipboard.
- Type:
string
- Required: yes
onCopy
The function that will be called when the text is copied.
— Type: () => void
— Required: yes
onFinishCopy
The function that will be called when the text is copied and the copy animation is finished.
— Type: () => void
— Required: no
Inherited props
Any additional props will be passed the underlying <Button/>
component. See the Button component for more details on the available props.