React Components

# Clipboard

## Overview

---

## Anatomy

---

Clipboard

ClipboardControl

ClipboardTrigger

---

## Clipboard

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
disabled

 | `boolean` | - | `undefined` | Whether the component is disabled. |
| 

i18n

 | `Partial` | - | `undefined` | Internal translations override (see Input i18n keys). |
| 

locale

 | `LOCALE` | - | `undefined` | The locale used for the translation of the internal elements. |
| 

onCopy

 | `() => void` | - | `undefined` | Callback fired when the input value is copied. |
| 

positionerStyle

 | `CSSProperties` | - | `undefined` | Custom style applied to the overlay positioner. Useful if you want to override the overlay z-index. |
| 

value

 | `string` | - | `undefined` | The input value. |

## ClipboardControl

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [input attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) . |
| 
loading

 | `boolean` | - | `undefined` | Whether the component is in loading state. |
| 

maskOption

 | `object` | - | `undefined` | Whether the masked display is active and its initial state. |
| 

enable

 | `boolean` |  | `-` | - |
| 

initialState

 | `literal` | - | `-` | - |

## ClipboardTrigger

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes) . |
| 
labelCopy

 | `string` | - | `'Copy to clipboard'` | The initial tooltip label on copy button. |
| 

labelCopySuccess

 | `string` | - | `'Copied!'` | The tooltip label on copy button after a successful copy. |

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Clipboard, ClipboardControl, ClipboardTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Clipboard value="Clipboard">
      <ClipboardControl />
      <ClipboardTrigger />
    </Clipboard>
}
```

### Disabled

```jsx
{
  globals: {
    imports: `import { Clipboard, ClipboardControl, ClipboardTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Clipboard value="Disabled" disabled>
      <ClipboardControl />
      <ClipboardTrigger />
    </Clipboard>
}
```

### Loading

```jsx
{
  globals: {
    imports: `import { Clipboard, ClipboardControl, ClipboardTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Clipboard value="Loading">
      <ClipboardControl loading />
      <ClipboardTrigger />
    </Clipboard>
}
```

### Masked

```jsx
{
  globals: {
    imports: `import { Clipboard, ClipboardControl, ClipboardTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Clipboard value="Masked">
      <ClipboardControl maskOption={{
      enable: true
    }} />
      <ClipboardTrigger />
    </Clipboard>
}
```

### Custom labels

```jsx
{
  globals: {
    imports: `import { Clipboard, ClipboardControl, ClipboardTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Clipboard value="Custom labels">
      <ClipboardControl />
      <ClipboardTrigger labelCopy="Click to copy" labelCopySuccess="Successfully copied" />
    </Clipboard>
}
```

## Recipes

---

Chat

Assistant2:58 PM

Welcome to the Chat recipe. Feel free to test the UI behavior by typing anything on your mind below.

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Data Grid

| 
 | 

First Name

 | 

Last Name

 | 

Age

 | 

IP Address

 | 

Actions

 |
| --- | --- | --- | --- | --- | --- |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |
| 

 | 

 | 

 | 

 | 

 | 

 |

102550100300

of 0 results