# CopyToClipboard

`CopyToClipboard` is a render-prop wrapper that copies text to the clipboard and exposes the copy status to its child, letting you render your own trigger; for a ready-made button use `ClipboardButton`.

```tsx
import {CopyToClipboard} from '@gravity-ui/uikit';
```

### Children (render function)

This is a render function provided as children properties. It can update its content depending on the status that is returned as the first argument in the render function.
There are three available statuses: pending, success, and error.

`pending`: Initial status returned in the render function in the neutral case.

`success`: Result status returned in the render function in case of success.

`error`: Result status returned in the render function in case of error.

The `timeout` option sets the time in ms to restore the initial (`pending`) status after one of the result statuses (`success` or `error`).

```tsx
const buttonText = {
  pending: 'Click Me',
  success: 'Copied!',
  error: "Couldn't copy...",
};

<CopyToClipboard text="Some text to copy" timeout={500}>
  {(status) => <button>{buttonText[status]}</button>}
</CopyToClipboard>;
```

## Properties

| Name     | Description                                                             |           Type           | Default |
| :------- | :---------------------------------------------------------------------- | :----------------------: | :-----: |
| children | `(status: CopyToClipboardStatus) => React.ReactElement` render function |        `Function`        |         |
| onCopy   | `copy` event handler                                                    |        `Function`        |         |
| text     | Text to copy (can be a string or a function that returns a string)      | `string \| () => string` |         |
| timeout  | Time in ms to restore the initial status                                |         `number`         |         |