Cloudflare Copyable Textarea Component
Installation with yarn is recommended
$ yarn add @cloudflare/component-copyable-textarea
CopyableTextarea has option to use self-defined text and ids for translation component.
import React from 'react';
import { CopyableTextarea } from '../../src';
class CopyableTextareaComponent extends React.Component {
render() {
return (
<>
<CopyableTextarea
name="copyable-textarea-example"
value="Some nice text that needs to be copied"
/>
// passing self-defined id(s) for translation
<CopyableTextarea
name="copyable-textarea-example"
value="Some nice text that needs to be copied"
clickToCopyTextId = 'api.click_to_copy'
copiedTextToClipboardTextId = 'api.copied_to_clipboard'
pressCommandOrCtrlCToCopyTextId = 'api.copy_failed'
/>
// passing self-defined translation fallback messages
<CopyableTextarea
name="copyable-textarea-example"
value="Some nice text that needs to be copied"
clickToCopyTextId = 'api.click_to_copy'
copiedTextToClipboardTextId = 'api.copied_to_clipboard'
pressCommandOrCtrlCToCopyTextId = 'api.copy_failed'
clickToCopyText = 'Click to copy API token'
copiedTextToClipboardText = 'API tokens copied to clipboard'
pressCommandOrCtrlCToCopyText = 'Failed to copy API token'
/>
</>
);
}
}
export default CopyableTextareaComponent;