Skip to content
A Blazor component library for interacting with the browser clipboard.
C# JavaScript TypeScript PowerShell
Branch: develop
Clone or download
mergify Merge pull request #169 from Basaingeal/dependabot/npm_and_yarn/types…
…cript-eslint/parser-2.17.0

Bump @typescript-eslint/parser from 2.16.0 to 2.17.0
Latest commit 5aef854 Jan 20, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src as IsSupported function Sep 30, 2019
.eslintignore switch to eslint Sep 23, 2019
.eslintrc.js add prettier Sep 23, 2019
.gitattributes switch to eslint Sep 23, 2019
.gitignore don't commit wwwroot Sep 23, 2019
.mergify.yml
.prettierrc add prettier Sep 23, 2019
CHANGELOG.md v1.2.1 changes Jan 15, 2020
ClipboardService.cs as IsSupported function Sep 30, 2019
CurrieTechnologies.Razor.Clipboard.csproj Bump Microsoft.AspNetCore.Components from 3.1.0 to 3.1.1 Jan 14, 2020
CurrieTechnologies.Razor.Clipboard.sln restructure project Sep 23, 2019
ExtensionMethods.cs restructure project Sep 23, 2019
LICENSE.md initial commit Jun 14, 2019
README.md add gotchas to readme Jan 10, 2020
azure-pipelines.yml bump .net core Sep 23, 2019
babel.config.js add babel Sep 23, 2019
package.json Bump @typescript-eslint/parser from 2.16.0 to 2.17.0 Jan 20, 2020
tsconfig.json add webpack Sep 23, 2019
versioning.ps1 add versioning and azure pipeline tasks Sep 23, 2019
webpack.config.js add webpack Sep 23, 2019
yarn.lock

README.md

CurrieTechnologies.Razor.Clipboard

This package provides Blazor applications with access to the browser's Clipboard API

This package is for Blazor Server Apps and Blazor WebAssembly Apps. CurrieTechnologies.Blazor.Clipboard is now deprecated.

Usage

  1. In your Blazor app, add the CurrieTechnologies.Razor.Clipboard NuGet package

    Install-Package CurrieTechnologies.Razor.Clipboard
  2. In your Blazor app's Startup.cs, register the 'ClipboardService'.

    public void ConfigureServices(IServiceCollection services)
    {
        ...
        services.AddClipboard();
        ...
    }
  3. Add this script tag in your root html file (Likely _Host.cshtml for Blazor Server Apps or index.html for Blazor WebAssembly Apps), right under the framework script tag. (i.e <script src="_framework/blazor.server.js"></script> for Blazor Server Apps or <script src="_framework/blazor.webassembly.js"></script> for Blazor WebAssembly Apps)

    <script src="_content/CurrieTechnologies.Razor.Clipboard/clipboard.min.js"></script>
  4. Now you can inject the ClipboardService into any Blazor page and use it like this:

    @using CurrieTechnologies.Razor.Clipboard
    @inject ClipboardService clipboard
    
    <input @bind="textValue" />
    <button @onclick="(async e => await clipboard.WriteTextAsync(textValue))">Copy To Clipboard</button>
    <button @onclick="(async e => textValue = await clipboard.ReadTextAsync())">Paste From Clipboard</button>
    
    @code
    {
        string textValue = string.Empty;
    }

Compatibility

Chrome Edge Legacy Edge (Chromium) Firefox IE Opera Safari
✔️ 63+ ✔️ * ✔️ 53+

* Firefox does support the clipboard API, but in a very restricted way that Blazor doesn't support.

Clipboard API Gotchas

The Clipboard API is a relatively new API and presents some security concerns, so keep these in mind.

  1. Clipboard events can only be raised in response to user input.
  2. Focus must be on the DOM window. (not the debugger, or another window)
  3. The page must be served over HTTPS

References

Unblocking Clipboard Access Clipboard API

You can’t perform that action at this time.