Snippet

Migration guide for Snippet from HeroUI v2 to v3

Key Changes

1. Component Removal

v2: <Snippet> component from @lenso/ui
v3: Native HTML elements (<pre>, <code>) with manual copy implementation

2. Features Mapping

The v2 Snippet component had the following features that need to be replaced:

Structure Changes

In v2, Snippet was a component wrapper with built-in copy functionality:

1import { Snippet } from "@lenso/ui";2
3export default function App() {4  return (5    <Snippet symbol="$">6      npm install @lenso/ui7    </Snippet>8  );9}

In v3, use native HTML elements with manual copy implementation:

1import { Button, Tooltip } from "@lenso/ui";2import { useState } from "react";3
4export default function App() {5  const [copied, setCopied] = useState(false);6
7  const handleCopy = async () => {8    await navigator.clipboard.writeText("npm install @lenso/ui");9    setCopied(true);10    setTimeout(() => setCopied(false), 2000);11  };12
13  return (14    <div className="flex items-center gap-2 rounded-lg bg-default-100 px-3 py-1.5">15      <pre className="text-sm font-mono">16        <span className="text-default-500">$ </span>17        npm install @lenso/ui18      </pre>19      <Tooltip>20        <Button21          isIconOnly22          aria-label="Copy"23          size="sm"24          variant="ghost"25          onPress={handleCopy}26        >27          {copied ? "✓" : "📋"}28        </Button>29        <Tooltip.Content>{copied ? "Copied!" : "Copy to clipboard"}</Tooltip.Content>30      </Tooltip>31    </div>32  );33}

Migration Examples

Multi-line Snippet

1<Snippet symbol="$">2  {[3    "npm install @lenso/ui",4    "yarn add @lenso/ui",5    "pnpm add @lenso/ui"6  ]}7</Snippet>

Styling Options

1{/* With variants */}2<Snippet variant="bordered" color="primary">3  npm install @lenso/ui4</Snippet>5
6{/* Without symbol */}7<Snippet hideSymbol>8  npm install @lenso/ui9</Snippet>10
11{/* Without copy button */}12<Snippet hideCopyButton>13  npm install @lenso/ui14</Snippet>

Creating a Reusable Snippet Component (Recommended)

Since Snippet functionality is commonly needed, here's a complete reusable component:

1import { Snippet } from "@lenso/ui";2
3<Snippet4  symbol="$"5  variant="bordered"6  color="primary"7  size="md"8>9  npm install @lenso/ui10</Snippet>

Summary

1. Component Removed: Snippet component no longer exists in v3
2. Import Change: Remove import { Snippet } from "@lenso/ui"
3. Use Native Elements: Replace with native <pre> and <code> elements
4. Manual Copy: Implement copy functionality using Clipboard API
5. Styling: Apply Tailwind CSS classes directly for variants, colors, sizes
6. Tooltip: Use v3 Tooltip component for copy button tooltips
7. Button: Use v3 Button component for copy button

Migration Steps

1. Remove Import: Remove Snippet from @lenso/ui imports
2. Replace Component: Replace all <Snippet> instances with native HTML elements
3. Add Copy Functionality: Implement copy using navigator.clipboard.writeText()
4. Add Copy Button: Use v3 Button component with Tooltip
5. Apply Styling: Use Tailwind CSS classes for variants, colors, sizes
6. Handle Multi-line: Map over arrays if multi-line snippets are needed
7. Optional: Create reusable Snippet component for your application

Clipboard API Notes

The Clipboard API requires:

• HTTPS (or localhost for development)
• User interaction (can't be called automatically)
• Browser support (modern browsers)

For fallback support:

1const handleCopy = async (text: string) => {2  try {3    await navigator.clipboard.writeText(text);4  } catch (error) {5    // Fallback for older browsers6    const textArea = document.createElement("textarea");7    textArea.value = text;8    textArea.style.position = "fixed";9    textArea.style.opacity = "0";10    document.body.appendChild(textArea);11    textArea.select();12    document.execCommand("copy");13    document.body.removeChild(textArea);14  }15};