dcc.Clipboard

The dcc.Clipboard component copies text to the
browser’s clipboard when the user selects the copy icon.

Examples

Find a few usage examples below.

Simple Clipboard Example

The easiest way to trigger the copy is by using the target_id property.
No callback is required! Place dcc.Clipboard in the layout where
you would like the copy icon located. Specify the target_id of the component
with text to copy. In this example, the content of the value property of the
dcc.Textarea is copied to the clipboard.

from dash import Dash, dcc, html

app = Dash(__name__)

app.layout = html.Div([
    dcc.Textarea(
        id="textarea_id",
        value="Copy and paste here",
        style={"height": 100},
    ),
    dcc.Clipboard(
        target_id="textarea_id",
        title="copy",
        style={
            "display": "inline-block",
            "fontSize": 20,
            "verticalAlign": "top",
        },
    ),
])

if __name__ == "__main__":
    app.run(debug=True)

Clipboard Icon inside a Scrollable Div

The style and className can be used to change the design or the position
of the copy icon. This example shows the icon placed in the top right corner
of a scrollable div. The next example shows the icon styled like a button.

from dash import Dash, dcc, html

app = Dash(__name__)

code = """```
html.Div([
    dcc.Markdown(
        code,
        id="code",
        style={"width": 500, "height": 200, "overflow": "auto"},
    ),
    dcc.Clipboard(
        target_id="code",
        style={
            "position": "absolute",
            "top": 0,
            "right": 20,
            "fontSize": 20,
        },
    ),
], style={"width": 500, "height": 200, "position": "relative"})
```"""

app.layout = html.Div([
    dcc.Markdown(
        code,
        id="code",
        style={"width": 500, "height": 200, "overflow": "auto"},
    ),
    dcc.Clipboard(
        target_id="code",
        style={
            "position": "absolute",
            "top": 0,
            "right": 20,
            "fontSize": 20,
        },
    ),
], style={"width": 500, "height": 200, "position": "relative"})


if __name__ == "__main__":
    app.run(debug=True)

html.Div([
    dcc.Markdown(
        code,
        id="code",
        style={"width": 500, "height": 200, "overflow": "auto"},
    ),
    dcc.Clipboard(
        target_id="code",
        style={
            "position": "absolute",
            "top": 0,
            "right": 20,
            "fontSize": 20,
        },
    ),
], style={"width": 500, "height": 200, "position": "relative"})

Updating the Clipboard Text in a Callback

When target_id is not specified, the content of the text property
is copied to the clipboard. This works well with components like the DataTable
where you may want to customize the text in a callback. In this example,
the dataframe is converted to text with pandas to_csv(). See the
pandas documentation
for other formatting options such as including or excluding headers.

from dash import Dash, dcc, html, Input, Output, State, dash_table, callback
import pandas as pd

app = Dash(__name__)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app.layout = html.Div(
    [
        dcc.Clipboard(id="table_copy", style={"fontSize":20}),
        dash_table.DataTable(
            df.to_dict("records"),
            [{"name": i, "id": i} for i in df.columns],
            id="table_cb",

        )
    ]
)


@callback(
    Output("table_copy", "content"),
    Input("table_copy", "n_clicks"),
    State("table_cb", "data"),
)
def custom_copy(_, data):
    dff = pd.DataFrame(data)
    # See options for .to_csv() or .to_excel() or .to_string() in the  pandas documentation
    return dff.to_csv(index=False)  # includes headers

if __name__ == "__main__":
    app.run(debug=True)

Limitations

This component uses the Clipboard API,
which is not supported by older browsers like Internet Explorer and is
unfortunately disabled frequently by corporate IT policies. When the Clipboard
API is unavailable, the icon will not appear in the app and a warning message is
written to the console.

Currently dcc.Clipboard only supports copying text to the
clipboard. It does not support paste or other clipboard operations.

Clipboard Properties

Access this documentation in your Python terminal with:
```python

help(dash.dcc.Clipboard)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise.

id (string; optional):
The ID used to identify this component.

target_id (string | dict; optional):
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 value prop will be copied.

content (string; optional):
The text to be copied to the clipboard if the target_id is None.

n_clicks (number; default 0):
The number of times copy button was clicked.

title (string; optional):
The text shown as a tooltip when hovering over the copy icon.

style (dict; optional):
The icon’s styles.

className (string; optional):
The class name of the icon element.

loading_state (dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a dict with keys: