Skip to content

Commit

Permalink
Update docs for ClipboardButton component (#34711)
Browse files Browse the repository at this point in the history
* Update Usage example to import useState from correct package.

* Add props entry to readme.

* Add message about props being passed to the Button component.

* Add deprecation callout.

* Add Inherited prop section.

* Update onCopy to be marked as required.

* Mark the text props as required.

Co-authored-by: Ryan Welcher <[email protected]>
  • Loading branch information
ryanwelcher and Ryan Welcher authored Sep 15, 2021
1 parent acccef8 commit 7bb5e4b
Showing 1 changed file with 41 additions and 1 deletion.
42 changes: 41 additions & 1 deletion packages/components/src/clipboard-button/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# ClipboardButton

<div class="callout callout-alert">
This component is deprecated. Please use the `useCopyToClipboard` hook from the `@wordpress/compose` package instead.
</div>

With a clipboard button, users copy text (or other elements) with a single click or tap.

![Clipboard button component](https://wordpress.org/gutenberg/files/2019/07/clipboard-button-2-1.png)
Expand All @@ -8,7 +12,7 @@ With a clipboard button, users copy text (or other elements) with a single click

```jsx
import { ClipboardButton } from '@wordpress/components';
import { useState } from '@wordpress/compose';
import { useState } from '@wordpress/element';

const MyClipboardButton = () => {
const [ hasCopied, setHasCopied ] = useState( false );
Expand All @@ -24,3 +28,39 @@ const MyClipboardButton = () => {
);
};
```

## 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](/packages/components/src/button/README.md#props) component for more details on the available props.

0 comments on commit 7bb5e4b

Please sign in to comment.