@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

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

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

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

With Token

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

Optional Field

<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

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