Code SnippetCopy Anchor Link

The CodeSnippet component displays formatted commands, scripts, and code excerpts with integrated one-click copying, scrollable viewports, and accessible live-region status feedback. It supports three distinct visual display types: single-line terminal commands, multi-line code blocks, and compact inline snippets.

Architectural AffordancesCopy Anchor Link

Technical tools require immediate affordance for copying executable commands and reading config blocks without layout distortion:

┌──────────────────────────────────────────────────────────┬───────┐
│ $ bun add @hashti/react @hashti/tokens                   │ [Copy]│
└──────────────────────────────────────────────────────────┴───────┘

• Three Display Types:
  • single: Horizontal terminal bar with command line and copy button.
  • multi: Full multi-line syntax block with optional vertical scrolling and line wrapping.
  • inline: Compact prose badge for keywords, configuration parameters, and paths.
• Accessible Clipboard Announcements: Includes a visually-hidden screen reader live region (role="status") announcing “Copied to clipboard” upon successful copy.
• Scrollable Keyboard Traversal: Multi-line code blocks feature tabIndex={0} and an accessible aria-label, allowing keyboard users to scroll long lines without mouse dragging.

ImportCopy Anchor Link

import { CodeSnippet } from "@hashti/react";
import type { CodeSnippetProps } from "@hashti/react";

Usage ExamplesCopy Anchor Link

Single-Line Terminal CommandCopy Anchor Link

Ideal for package manager commands, curl requests, and terminal invocations:

import { CodeSnippet } from "@hashti/react";

export function SingleLineSnippetDemo() {
  return (
    <CodeSnippet type="single" label="Package installation command">
      bun add @hashti/react @hashti/tokens
    </CodeSnippet>
  );
}

Multi-Line Code BlockCopy Anchor Link

Designed for code blocks, JSON payloads, and configuration files. Supports setting maxHeight for contained scrolling and wrapText to prevent horizontal clipping:

import { CodeSnippet } from "@hashti/react";

const configExample = `{
  "name": "hashti-cluster",
  "version": "1.0.0",
  "theme": "frame-dark",
  "nodes": [
    { "id": "ir-thr-01", "role": "primary" },
    { "id": "ir-shz-02", "role": "replica" }
  ]
}`;

export function MultiLineSnippetDemo() {
  return (
    <CodeSnippet
      type="multi"
      label="Hashti Configuration Manifest"
      language="json"
      maxHeight="220px"
    >
      {configExample}
    </CodeSnippet>
  );
}

Inline Code SnippetCopy Anchor Link

Use type="inline" within running documentation copy or tables to present actionable tokens, environment variables, or file paths:

import { CodeSnippet } from "@hashti/react";

export function InlineSnippetDemo() {
  return (
    <p className="text-sm text-neutral-800 dark:text-neutral-200">
      Set the environment variable <CodeSnippet type="inline">HASHTI_VAULT_KEY</CodeSnippet> in your
      production secret manager before initiating container boot.
    </p>
  );
}

Disabling the Copy ActionCopy Anchor Link

For read-only logs or sensitive hashes where manual selection is preferred:

import { CodeSnippet } from "@hashti/react";

export function NonCopyableSnippetDemo() {
  return (
    <CodeSnippet type="single" copyable={false} label="System Build Hash">
      commit 3f9a72b (HEAD -&gt; main, origin/main)
    </CodeSnippet>
  );
}

Props ReferenceCopy Anchor Link

Accessibility & Keyboard InteractionCopy Anchor Link

Keyboard InteractionCopy Anchor Link

• Tab: Focuses the one-click copy button and the code viewport (<pre tabIndex={0}>).
• Space / Enter: Activates the copy button when focused.
• Arrow Keys: When the code container <pre> is focused, users can scroll horizontally and vertically using standard keyboard navigation.

Screen Reader & Live Region SemanticsCopy Anchor Link

• Copy Status Announcement: When the copy button is pressed, the component updates an internal status string inside a <span role="status" className="hashti-visually-hidden">. Assistive technologies immediately announce “Copied to clipboard” without disturbing screen reader cursor focus.
• Descriptive Button Label: The copy button utilizes aria-label={\Copy ${label.toLowerCase()}`}` (e.g. “Copy package installation command”), ensuring screen reader users understand what payload will be copied.
• Scroll Container Semantics: Scrollable code blocks include aria-label={label} so that the scrollable region has an unambiguous accessible name.

Keyboard InteractionsCopy Anchor Link

WAI-ARIA & Data AttributesCopy Anchor Link