npm package: @rhc-shared-components/form-text-input-clipboard-copy
Description: Text input clipboard copy component for certified technology apps
Author: redhatofficial
Latest version: 1.0.1

# @rhc-shared-components/form-text-input-clipboard-copy

> Text input clipboard copy component for certified technology apps

A Formik-compatible text input component with built-in clipboard copy functionality, designed for displaying and copying sensitive values like API keys, tokens, and other read-only or copyable text.

## Install

```bash
npm install --save @rhc-shared-components/form-text-input-clipboard-copy
```

## Dependencies

This component requires the following peer dependencies:

- `@patternfly/react-core` >= 5.3.4
- `formik` >= 2.1.4
- `react` >= 16.13.1
- `react-dom` >= 16.13.1

## Usage

```tsx
import React from 'react';
import { Formik, Form } from 'formik';
import { FormTextInputClipboardCopy } from '@rhc-shared-components/form-text-input-clipboard-copy';

const MyForm = () => {
  return (
    <Formik
      initialValues={{
        apiKey: 'sk_test_abc123def456ghi789jkl012'
      }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ values }) => (
        <Form>
          <FormTextInputClipboardCopy
            name="apiKey"
            label="API Key"
            helperText="Click the copy button to copy this API key"
            isRequired
            copyContent={values.apiKey}
          />
        </Form>
      )}
    </Formik>
  );
};
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `name` | `string` | Yes | - | The field name (used by Formik) |
| `label` | `string` | Yes | - | The label text for the field |
| `copyContent` | `any` | No | - | The content to be copied to clipboard (typically the field value) |
| `isRequired` | `boolean` | No | `false` | Whether the field is required |
| `isDisabled` | `boolean` | No | `false` | Whether the field is disabled/read-only |
| `helperText` | `string` | No | - | Helper text displayed below the field |
| `placeholder` | `string` | No | - | Placeholder text |
| `value` | `string` | No | - | Initial value |
| `maxLength` | `number` | No | - | Maximum length of input |
| `labelIcon` | `any` | No | - | Icon to display next to the label |
| `formGroupProps` | `any` | No | - | Additional props to pass to FormGroupContainer |
| `skipTouchedValidation` | `boolean` | No | `false` | Skip touched validation |
| `onChange` | `function` | No | - | Custom onChange handler |
| `onBlur` | `function` | No | - | Custom onBlur handler |
| `onFocus` | `function` | No | - | Custom onFocus handler |

## Examples

### Basic Example

```tsx
<FormTextInputClipboardCopy
  name="apiKey"
  label="API Key"
  helperText="Click the copy button to copy this API key"
  isRequired
  copyContent={values.apiKey}
/>
```

### With Token

```tsx
<FormTextInputClipboardCopy
  name="token"
  label="Access Token"
  helperText="Your secure access token"
  isRequired
  copyContent={values.token}
/>
```

### Optional Field

```tsx
<FormTextInputClipboardCopy
  name="optionalValue"
  label="Optional Value"
  helperText="This field is not required"
  placeholder="Enter a value to copy"
  copyContent={values.optionalValue}
/>
```

### Disabled/Read-only Field

```tsx
<FormTextInputClipboardCopy
  name="readonlyValue"
  label="Read-only Value"
  helperText="This field is disabled"
  isDisabled
  copyContent={values.readonlyValue}
/>
```