Skip to content

update Clipboard #3568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
AnnMarieW wants to merge 3 commits into
base: dev
Choose a base branch
from
+20 −6
Draft

update Clipboard #3568

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6dbafd5
update Clipboard
AnnMarieW Jan 12, 2026
4a3d6ab
Keep div as element type so it doesn't change the layout
AnnMarieW Jan 12, 2026
cffac43
simplify API
AnnMarieW Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions components/dash-core-components/src/components/Clipboard.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,10 +128,14 @@ export default class Clipboard extends React.Component {
}

render() {
const {id, title, className, style} = this.props;
const copyIcon = <FontAwesomeIcon icon={faCopy} />;
const copiedIcon = <FontAwesomeIcon icon={faCheckCircle} />;
const btnIcon = this.state.copied ? copiedIcon : copyIcon;
const {id, title, className, style, children, copied_children} =
this.props;

const isCopied = this.state.copied;

const button_children = isCopied
? copied_children ?? <FontAwesomeIcon icon={faCheckCircle} />
: children ?? <FontAwesomeIcon icon={faCopy} />;

return clipboardAPI ? (
<LoadingElement
Expand All @@ -141,7 +145,7 @@ export default class Clipboard extends React.Component {
className={className}
onClick={this.onClickHandler}
>
<i> {btnIcon}</i>
{button_children}
</LoadingElement>
) : null;
}
Expand All @@ -160,6 +164,16 @@ Clipboard.propTypes = {
*/
id: PropTypes.string,

/**
* Children rendered inside the Clipboard button before copying. By default, a copy icon.
*/
children: PropTypes.node,

/**
* Children rendered inside the Clipboard button after the value has been copied. By default, a check icon.
*/
copied_children: PropTypes.node,

/**
* The id of target component containing text to copy to the clipboard.
* The inner text of the `children` prop will be copied to the clipboard. If none, then the text from the
Expand All @@ -173,7 +187,7 @@ Clipboard.propTypes = {
content: PropTypes.string,

/**
* The number of times copy button was clicked
* The number of times Clipboard button was clicked
*/
n_clicks: PropTypes.number,

Expand Down