# useClipboard

*Category:* Utilities
*Section:* Browser & device hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClipboard
*Captured:* 2026-04-27T14:59:38.703Z

The useClipboard hook allows to easily copy something to the browsers clipboard.

## useClipboard

### Example: Example 1

Random UUID

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import useClipboard from '@rio-cloud/rio-uikit/useClipboard';
import Notification from '@rio-cloud/rio-uikit/Notification';
import Button from '@rio-cloud/rio-uikit/Button';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

export default () => {
    const [inputValue, setInputValue] = useState<string>(crypto.randomUUID());

    const clipboard = useClipboard();

    useEffect(() => {
        clipboard.copied && Notification.default('Text copied to clipboard');
    }, [clipboard.copied]);

    const handleCopyButtonClick = () => {
        clipboard.copy(inputValue);
    };

    return (
        <div className='form-group max-width-500 margin-auto padding-25'>
            <FormLabel htmlFor='random-uuid'>Random UUID</FormLabel>
            <div className='input-group'>
                <input
                    id='random-uuid'
                    className='form-control'
                    type='text'
                    value={inputValue}
                    onChange={event => setInputValue(event.currentTarget.value)}
                />
                <div className='input-group-addon'>
                    <Button
                        bsStyle='muted'
                        bsSize='sm'
                        className='position-absolute top-1 right-1'
                        onClick={handleCopyButtonClick}
                        iconName='rioglyph-duplicate'
                        iconOnly
                    />
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="form-group max-width-500 margin-auto padding-25">
    <label for="random-uuid" class="display-inline-block">
        <span>Random UUID</span>
    </label>
    <div class="input-group">
        <input id="random-uuid" class="form-control" type="text" value="6e2d4717-221f-4475-864f-973f1cb5f24e">
        <div class="input-group-addon">
            <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1" tabindex="0">
                <span class="rioglyph rioglyph-duplicate">
                </span>
            </button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| options.timeout | Number | 2000 | The copied status timeout duration in milliseconds. |