{"id":26280087,"url":"https://github.com/kristofferstrube/blazor.popper","last_synced_at":"2025-05-07T03:04:31.356Z","repository":{"id":109456002,"uuid":"283608233","full_name":"KristofferStrube/Blazor.Popper","owner":"KristofferStrube","description":"A Blazor wrapper for the Javascript library Popper.js","archived":false,"fork":false,"pushed_at":"2024-03-05T22:25:23.000Z","size":8803,"stargazers_count":29,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T03:04:21.425Z","etag":null,"topics":["align","blazor","blazor-webassembly","blazor-wrapper","javascript","popper","tooltip"],"latest_commit_sha":null,"homepage":"","language":"C#","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/KristofferStrube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2020-07-29T21:43:30.000Z","updated_at":"2024-12-26T01:58:49.000Z","dependencies_parsed_at":"2024-03-05T21:51:18.345Z","dependency_job_id":null,"html_url":"https://github.com/KristofferStrube/Blazor.Popper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Popper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Popper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Popper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KristofferStrube%2FBlazor.Popper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KristofferStrube","download_url":"https://codeload.github.com/KristofferStrube/Blazor.Popper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252804206,"owners_count":21806769,"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":["align","blazor","blazor-webassembly","blazor-wrapper","javascript","popper","tooltip"],"created_at":"2025-03-14T14:18:37.705Z","updated_at":"2025-05-07T03:04:31.332Z","avatar_url":"https://github.com/KristofferStrube.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](/LICENSE.md)\n[![GitHub issues](https://img.shields.io/github/issues/KristofferStrube/Popperize)](https://github.com/KristofferStrube/Popperize/issues)\n[![GitHub forks](https://img.shields.io/github/forks/KristofferStrube/Popperize)](https://github.com/KristofferStrube/Popperize/network/members)\n[![GitHub stars](https://img.shields.io/github/stars/KristofferStrube/Popperize)](https://github.com/KristofferStrube/Popperize/stargazers)\n[![NuGet Downloads (official NuGet)](https://img.shields.io/nuget/dt/KristofferStrube.Blazor.Popper?label=NuGet%20Downloads)](https://www.nuget.org/packages/KristofferStrube.Blazor.Popper/)  \n\n# Introduction\nA Blazor wrapper for the JavaScript library Popper.js\n\n# Demo\n\nThe sample project can be demoed at [https://kristofferstrube.github.io/Blazor.Popper/](https://kristofferstrube.github.io/Blazor.Popper/)\n\n# Getting Started\n## Prerequisites\nYou need to install .NET 6.0 or newer to use the library.\n\n[Download .NET 6](https://dotnet.microsoft.com/download/dotnet/6.0)\n\n## Installation\nYou can install the package via Nuget with the Package Manager in your IDE or alternatively using the command line:\n```bash\ndotnet add package KristofferStrube.Blazor.Popper\n```\n\n# Usage\nThe package can be used in Blazor WebAssembly projects.\n## Assets\nYou first need to reference `popper.js` since this is only a wrapper. You can do this using your favorite JS package manager (e.g. `NPM` or `Library Manager`) or just add the following to the body of your `index.html` file after the point where you reference `_framework/blazor.webassembly.js`.\n```html\n\u003cscript src=\"https://unpkg.com/@popperjs/core@2\"\u003e\u003c/script\u003e\n```\n## Import\nYou also need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.\n```csharp\n@using KristofferStrube.Blazor.Popper\n```\n## Add to service collection\nAn easy way to make Popper available in all your pages is by registering it in the `IServiceCollection` so that it can be dependency injected in the pages that need it. This is done in `Program.cs` by adding the following before you build the service collection.\n```csharp\npublic static async Task Main(string[] args)\n{\n    var builder = WebAssemblyHostBuilder.CreateDefault(args);\n    builder.RootComponents.Add\u003cApp\u003e(\"#app\");\n\n    // Other services are added.\n\n    builder.Services.AddScoped\u003cPopper\u003e();\n\n    await builder.Build().RunAsync();\n}\n```\n## Inject in page\nIn any page that need a popper you can then inject Popper by adding the following to the top of the razor file.\n```\n@inject Popper Popper;\n```\nThen you can use `Popper` to create a popper instance between two `ElementReference`'s like so:\n```razor\n\u003cspan @ref=reference\u003ereference\u003c/span\u003e\n\u003cspan @ref=popper\u003epopper\u003c/span\u003e\n\n@code {\n    protected ElementReference reference;\n    protected ElementReference popper;\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        await Popper.CreatePopperAsync(reference, popper, new());\n    }\n}\n```\n\n# Related articles\nThis repository was build on top of the work done in the following series of articles:\n\n- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)\n- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)\n- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)\n- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)\n- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.popper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofferstrube%2Fblazor.popper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofferstrube%2Fblazor.popper/lists"}