ClipboardButton — это компонент WordPress, который позволяет пользователю копировать текст в буфер обмена одним нажатием кнопки. Несмотря на то, что компонент считается устаревшим и рекомендуется использовать хук useCopyToClipboard из пакета @wordpress/compose, ClipboardButton всё ещё может применяться в проектах.
Основные сведения о ClipboardButton
Компонент ClipboardButton позволяет пользователю копировать текст или другие элементы в буфер обмена, что упрощает процесс копирования. Например, этот компонент полезен для создания кнопки, с помощью которой можно быстро копировать ссылку или фрагмент кода.
Применение компонента ClipboardButton
В данном примере создается кнопка, которая копирует указанный текст и показывает уведомление «Скопировано!» после успешного копирования.
import { useState } from 'react';
import { ClipboardButton } from '@wordpress/components';
const CopyExample = () => {
const [hasCopied, setHasCopied] = useState(false);
return (
<ClipboardButton
className="custom-clipboard-button"
text="Скопируйте этот текст!"
onCopy={() => setHasCopied(true)}
onFinishCopy={() => setHasCopied(false)}
variant="primary"
>
{hasCopied ? 'Скопировано!' : 'Копировать текст'}
</ClipboardButton>
);
};
Основные свойства (Props)
className
- Описание: CSS-класс, который будет добавлен к кнопке.
- Тип:
string - Обязателен: Нет
- Пример:
<ClipboardButton className="custom-button" text="Text to copy" />
text
- Описание: Текст, который будет скопирован в буфер обмена при нажатии на кнопку.
- Тип:
string - Обязателен: Да
- Пример:
<ClipboardButton text="Скопируйте этот текст" />
onCopy
- Описание: Функция, вызываемая в момент копирования текста.
- Тип:
() => void - Обязателен: Да
- Пример:
<ClipboardButton
text="Скопируйте этот текст"
onCopy={() => alert('Текст скопирован!')}
/>
onFinishCopy
- Описание: Функция, вызываемая после завершения анимации копирования.
- Тип:
() => void - Обязателен: Нет
- Пример:
<ClipboardButton
text="Скопируйте этот текст"
onCopy={() => console.log('Копирование началось')}
onFinishCopy={() => console.log('Копирование завершено')}
/>
variant
- Описание: Определяет внешний вид кнопки (например, primary, secondary).
- Тип:
string - Обязателен: Нет
- Пример:
<ClipboardButton text="Скопируйте текст" variant="secondary" />
Наследуемые свойства
ClipboardButton наследует свойства компонента <Button>, поэтому можно добавлять любые дополнительные параметры, поддерживаемые <Button>, такие как disabled, aria-label и другие.
Пример 1: Базовая кнопка копирования с уведомлением
В этом примере кнопка копирует текст «Скопируйте этот текст!» и выводит уведомление о том, что копирование прошло успешно.
import { useState } from 'react';
import { ClipboardButton } from '@wordpress/components';
const CopyWithNotification = () => {
const [copyStatus, setCopyStatus] = useState(false);
return (
<ClipboardButton
text="Скопируйте этот текст!"
onCopy={() => setCopyStatus(true)}
onFinishCopy={() => setCopyStatus(false)}
variant="primary"
>
{copyStatus ? 'Текст скопирован!' : 'Скопировать текст'}
</ClipboardButton>
);
};
Пример 2: Использование с разными стилями и значками
Этот пример демонстрирует, как использовать ClipboardButton с разными стилями, добавляя значки и применяя кастомный CSS-класс.
import { useState } from 'react';
import { ClipboardButton } from '@wordpress/components';
const StyledClipboardButton = () => {
const [copied, setCopied] = useState(false);
return (
<ClipboardButton
className="styled-clipboard-button"
text="Ссылка для копирования"
onCopy={() => setCopied(true)}
onFinishCopy={() => setCopied(false)}
variant="secondary"
>
{copied ? 'Скопировано!' : 'Копировать ссылку'}
</ClipboardButton>
);
};
Пример 3: Кнопка копирования с анимацией
В следующем примере используется ClipboardButton с анимацией, чтобы показать, как статус «Скопировано!» отображается на ограниченное время, после чего возвращается к исходному состоянию.
import { useState, useEffect } from 'react';
import { ClipboardButton } from '@wordpress/components';
const AnimatedClipboardButton = () => {
const [isCopied, setIsCopied] = useState(false);
useEffect(() => {
if (isCopied) {
const timer = setTimeout(() => setIsCopied(false), 1500);
return () => clearTimeout(timer);
}
}, [isCopied]);
return (
<ClipboardButton
text="Текст для копирования"
onCopy={() => setIsCopied(true)}
variant="primary"
>
{isCopied ? 'Скопировано!' : 'Нажмите для копирования'}
</ClipboardButton>
);
};
Заключение
ClipboardButton — это удобный компонент для добавления функции копирования текста в буфер обмена, особенно полезный для интерфейсов, где пользователям часто нужно копировать ссылки, текстовые данные и другие элементы.