ClipLazor 4.0.0

ClipLazor: Clipboard API Interop for Blazor

ClipLazor is a modern, high-performance library providing full Clipboard API interop and UI components for Blazor applications (both Blazor WebAssembly and Blazor Server on .NET 10+).

✨ Features

• 🚀 Zero Configuration: Uses Blazor JavaScript Isolation (ES Modules). No manual <script> tags required!
• 🔘 <CopyButton> Component: Instant copy button with embedded Lucide icons, customizable slots, and automatic Copied! ✔ feedback.
• 📋 <ClipboardPasteZone> Component: Paste & dropzone container for capturing Ctrl+V and drag-and-drop screenshots/files.
• ✂️ <ClipboardTextAction> Component: Declarative button to copy or cut text from DOM elements by ID.
• 📝 Plain Text: Copy and paste strings or memory buffers (string, ReadOnlyMemory<char>).
• 🎨 Rich HTML: First-class WriteHtmlAsync and ReadHtmlAsync with automatic plain text fallback.
• 🖼️ Binary & Image Streams: Read and write binary data using ReadOnlyMemory<byte> or Stream.
• ⚡ Cancellation Support: Full CancellationToken support across all async methods.

📦 Installation

1. Install ClipLazor via the .NET CLI:

dotnet add package ClipLazor

2. Register the service in your dependency injection container (Program.cs):

using ClipLazor.Extensions;

builder.Services.AddClipboard();

🎨 UI Components

1. <CopyButton> (Automatic Feedback Button)

A button with built-in Lucide SVG icons, temporary feedback states (Copied! ✔), error handling, and rich customization slots:

@* Simple copy button with auto 2-second checkmark *@
<CopyButton Text="dotnet add package ClipLazor" Class="btn btn-primary" CopiedClass="btn btn-success" />

@* Customized copy button *@
<CopyButton Text="https://github.com/p6laris/ClipLazor" 
            ButtonText="Copy Link" 
            CopiedText="Link Copied! 🎉" 
            FeedbackTimeoutMs="3000" 
            Class="btn btn-outline-info" />

@* Icon-only button *@
<CopyButton Text="npm install cliplazor" ShowText="false" IconSize="20px" Class="btn btn-sm btn-dark" />

<CopyButton> Parameters

2. <ClipboardPasteZone> (Paste & Drag-and-Drop Dropzone)

A container component that captures keyboard paste events (Ctrl+V / Cmd+V) and drag-and-drop file uploads:

<ClipboardPasteZone Class="border border-dashed rounded p-4 text-center" 
                    DragOverClass="border-primary bg-light shadow-sm"
                    AcceptedMimeTypes='new[] { "image/png", "image/jpeg" }'
                    OnPaste="HandlePaste">
</ClipboardPasteZone>

@code {
    void HandlePaste(ClipboardPasteEventArgs e)
    {
        if (e.HasImage)
        {
            byte[] imageBytes = e.ImageData.ToArray();
            // Process screenshot or dropped image
        }
        else if (e.HasText)
        {
            Console.WriteLine($"Pasted text: {e.Text}");
        }
    }
}

<ClipboardPasteZone> Parameters

3. <ClipboardTextAction> (DOM Element Action)

Perform copy or cut actions targeting specific DOM element IDs:

<input id="myInput" value="Sample text" />
<ClipboardTextAction TargetId="myInput" Action="ClipboardAction.Copy" Class="btn btn-dark">
    Copy Input Value
</ClipboardTextAction>

🚀 Service API Usage (IClipLazor)

Inject IClipLazor into any Razor component or service:

@using ClipLazor.Components
@inject IClipLazor Clipboard

1. Plain Text

// Write string
await Clipboard.WriteTextAsync("Hello World!");

// Read string
string? text = await Clipboard.ReadTextAsync();

2. Rich HTML

// Write HTML with automatic plain text fallback
await Clipboard.WriteHtmlAsync("<strong>ClipLazor</strong> is <em>awesome</em>!");

// Read HTML
string? html = await Clipboard.ReadHtmlAsync();

3. Binary & Images

// Write byte array
byte[] bytes = ...;
await Clipboard.WriteDataAsync(bytes, "image/png");

// Write from Stream
using var stream = File.OpenRead("image.png");
await Clipboard.WriteDataAsync(stream, "image/png");

// Read as byte buffer or Stream
ReadOnlyMemory<byte> data = await Clipboard.ReadDataAsync("image/png");
using Stream? imageStream = await Clipboard.ReadDataStreamAsync("image/png");

📄 License

MIT License