{"id":19809318,"url":"https://github.com/p6laris/cliplazor","last_synced_at":"2026-06-09T02:03:03.881Z","repository":{"id":60959607,"uuid":"547106186","full_name":"p6laris/ClipLazor","owner":"p6laris","description":"ClipLazor is a library that provides interop for the Clipboard API in Blazor applications, allowing you to easily interact with the clipboard.","archived":false,"fork":false,"pushed_at":"2024-02-09T17:16:59.000Z","size":285,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-26T21:48:10.782Z","etag":null,"topics":["blazor","blazor-application","blazor-components","blazor-server","blazor-wasm","blazor-webassembly","clipboard","clipboard-api","clipboard-copy","clipboard-js","clipboardjs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/p6laris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-10-07T06:26:27.000Z","updated_at":"2023-09-23T02:34:11.000Z","dependencies_parsed_at":"2024-02-09T18:29:40.924Z","dependency_job_id":null,"html_url":"https://github.com/p6laris/ClipLazor","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":"0.46153846153846156","last_synced_commit":"9fd8213ab879ec7a48b7f9c66da822b7e3d7f034"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FClipLazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FClipLazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FClipLazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FClipLazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p6laris","download_url":"https://codeload.github.com/p6laris/ClipLazor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241152632,"owners_count":19918658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-application","blazor-components","blazor-server","blazor-wasm","blazor-webassembly","clipboard","clipboard-api","clipboard-copy","clipboard-js","clipboardjs"],"created_at":"2024-11-12T09:16:34.230Z","updated_at":"2026-06-09T02:03:03.844Z","avatar_url":"https://github.com/p6laris.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ClipLazor: Clipboard API Interop for Blazor\n\nClipLazor is a library that provides interop for the Clipboard API in Blazor applications, allowing you to easily interact with the clipboard.\n\n\n![alt text](https://github.com/p6laris/ClipLazor/blob/master/ClipboardLazor.png?raw=true)\n\n[![NuGet](https://img.shields.io/nuget/dt/ClipLazor?logo=nuget)](https://www.nuget.org/packages/ClipLazor)\n## Installation\n1. Install [ClipLazor](https://www.nuget.org/packages/ClipLazor) with dotnet cli in your Blazor app.\n\n  ```sh\n  dotnet add package ClipLazor \n  ```\n2. Register the service to the IoC container using `AddClipboard` method:\n\n  ```C#\n  using ClipLazor.Extention;\n\n  // Inside your ConfigureServices method\n  builder.Service.AddClipboard();\n  ```\n3.Add this script tag in your root file **_Host.cshtml or App.razor for Blazor Server Apps** and **index.html for Blazor WebAssembly Apps**:\n  ```html\n\n  \u003cscript src=\"_framework/blazor.server.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"_content/ClipLazor/clipboard.min.js\"\u003e\u003c/script\u003e\n  ```\n  \n## Usage\nAfter ClipLazor being installed, you can inject it in your razor file using `IClipLazor` interface:\n\n  ```razor\n  @using ClipLazor.Components;\n  @inject IClipLazor Clipboard\n   ```\n### Checking Browser Support\nYou can check if the browser supports the Clipboard API with the `IsClipboardSupported()` asynchronous method:\n```C#\nbool isSupported = await Clipbaord.IsClipboardSupported();\n```\n\n:warning: Most of non-Chromium browsers (Firefox or safari) does not support clipboard api permissions so the `IsClipboardSupported()` and `Clipboard.IsPermitted(PermissionCommand.Write)`, `Clipboard.IsPermitted(PermissionCommand.Read)` will always return **true**. \nPlease check this [mdn](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#security_considerations)\n\n### Checking Permissions\nThe Clipboard API requires user permission to read and write to the clipboard. Use the `IsPermitted()` asynchronous method with the `PermissionCommand` enum to check read or write permission:\n```C#\nbool isWritePermitted = await Clipboard.IsPermitted(PermissionCommand.Write);\nbool isReadPermitted = await Clipboard.IsPermitted(PermissionCommand.Read);\n```\n### Read And Write Text\n1.To copy a text to the clipboard use `WriteTextAsync()` async method and pass the text(:warning: pass the argument by ReadOnlyMemory). The method return **true** if the copy operation is successful; otherwise, **false**:\n```C#\nstring txt = string.Empty;\nif(isSupported \u0026\u0026 txt.Length \u003e 0)\n{\n    if (isWritePermitted)\n    {\n        var isCopied = await Clipboard.WriteTextAsync(txt.AsMemory());\n        if (isCopied)\n        {\n            msg = \"Text Copied\";\n        }\n        else\n        {\n            msg = \"Couldn't copy the text!.\";\n        }\n    }\n}\n```\n2. To paste a text from the clipboard use 'ReadTextAsync()' async method. if the paste operation was successed the method ruturns the **text string**; otherwise **null**:\n```C#\nstring pastedTxt = string.Empty;\nif(isSupported \u0026\u0026 isReadPermitted)\n{\n    var pastedText = await Clipboard.ReadTextAsync();\n    if (pastedText is not null)\n    {\n        msg = \"Text Pasted\";\n        pastedTxt = pastedText;\n    }\n    else\n    {\n        msg = \"Couldn't paste the text!.\";\n    }\n}\n```\n3. Or you can use the `ClipboardTextAction` component which contain a single html button, to easily perform clipboard actions, such as copying text or cutting content, directly from a text content HTML element or a text source.\n\n**Parameters**\n| Parameter       | Type                                     | Description                                                                                  | Default               |\n|------------------|------------------------------------------|----------------------------------------------------------------------------------------------|-----------------------|\n| `TargetId`       | `string`                                 | The ID of the target element to perform the clipboard action on.                             | `string.Empty`        |\n| `Text`           | `string`                                 | The text to copy to the clipboard.                                                          | `string.Empty`        |\n| `Action`         | `ClipboardAction`                        | Clipboard action to perform (`Copy` or `Cut`).                                               | `ClipboardAction.Copy` |\n| `Class`          | `string`                                 | CSS class to apply to the button.                                                           | `string.Empty`        |\n| `Style`          | `string`                                 | Inline styles to apply to the button.                                                       | `string.Empty`        |\n| `OnAction`       | `EventCallback\u003cOnTextActionEventArgs\u003e`    | Event triggered when the clipboard action is completed.                                      | `null`                |\n\n**Event Argument**\n\nThe `OnTextActionEventArgs` class provides details about the clipboard action:\n\n1. **Action**: The clipboard action performed (Copy or Cut), Copy if `Text` provided.\n2. **Text**: The text associated with the action. Empty (\"\") if failed.\n3. **IsSuccess**: A boolean indicating whether the action succeeded.\n\n```razor\n\u003cinput id=\"nameInput\" /\u003e\n\u003cClipboardTextAction TargetId=\"nameInput\" Action=\"ClipboardAction.Cut\" OnAction=\"HandleAction\"\u003eCopy\u003c/ClipboardTextAction\u003e\n@* OR *@\n\u003cClipboardTextAction Text=\"Hello World!\"\u003eSay hi to the clipboard\u003c/ClipboardTextAction\u003e\n\n\n@code {\nprivate void HandleAction(OnTextActionEventArgs e){\n    string message = string.Empty;\n\n    if (e.IsSuccess)\n    {\n        var action = e.Action is ClipboardAction.Copy ? \"copied\" : \"cut\";\n        message = $\"Text: {e.Text} has been {action} successfully.\";\n    }\n    else\n        message = $\"Could not {e.Action.ToString()} to the clipboard.\";\n\n }\n}\n```\nℹ️ If the Clipboard API is not supported, the `ClipLazor` will automatically falls back to using the `execCommand` method to perform clipboard actions. While `execCommand` is considered deprecated and less reliable, it ensures broader compatibility with older browsers.\n\n### Read And Write Data\n:exclamation: When you work with data to copy to the clipboard or paste from it, the `MIME Type` has to be specified. Note that not all MIME types supported by the clipboard api.\n#### Common Supported Mime Types:\n* **\"text/plain\"**\n* **\"text/html\"**\n* **\"text/uri-list\"**\n* **\"image/png\"**\n\n1. To copy data to the clipboard use `WriteDataAsync` async method. pass the array buffer of the data and it's associated MIME Type. This method will return **true** if the copy operation is successful; otherwise, **false**:\n```C#\n byte[] imgArray = Convert.FromBase64String(imageToCopy);\n\n if(imgArray.Length \u003e 0 \u0026\u0026 isWritePermitted)\n {\n     var isDataCopied = await Clipboard.WriteDataAsync(imgArray, \"image/png\");\n\n     if (isDataCopied)\n     {\n         dmsg = \"Image Copied!\";\n     }\n     else\n     {\n         dmsg = \"Failed to copy the image!.\";\n     }\n }\n```\n2. To paste the data from the clipboard use `ReadDataAsync` async method and pass the `MIME Type` argument, the method will return **`ReadOnlyMemory\u003cbyte\u003e`** of the data; or an **empty one**:\n```C#\nif (isReadPermitted)\n{\n    var pastedData = await Clipboard.ReadDataAsync(\"image/png\");\n    if (!pastedData.IsEmpty)\n    {\n        pastedImg = Convert.ToBase64String(pastedData.ToArray());\n        dmsg = \"Image Pasted\";\n\n    }\n    else\n    {\n        dmsg = \"Couldn't paste the image\";\n    }\n}\n```\n:page_facing_up: See the [full example](https://github.com/p6laris/ClipLazor/blob/master/ClipLazor.WASM/Pages/Index.razor) code.\n\n## License\n[MIT License](LICENSE.txt)\n\n    \n    \n \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp6laris%2Fcliplazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp6laris%2Fcliplazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp6laris%2Fcliplazor/lists"}