Create new a new Razor Class Library project

src/3.x/README.txt

@@ -1 +1,3 @@
+
+.net core 3.x
 https://www.iaspnetcore.com/blog/blogpost/5cb3269642993a0a84f2298e/aspnet-core-blazor6creating-a-reusable-a-reusable-grid-component

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30907.101
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "iAspNetCore.RazorComponents", "iAspNetCore.RazorComponents\iAspNetCore.RazorComponents.csproj", "{E4E5E040-F2B2-411B-9579-DC02588A68BD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{E4E5E040-F2B2-411B-9579-DC02588A68BD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{E4E5E040-F2B2-411B-9579-DC02588A68BD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{E4E5E040-F2B2-411B-9579-DC02588A68BD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{E4E5E040-F2B2-411B-9579-DC02588A68BD}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {D1B85B48-6806-4D79-8749-F95C3BDD3B09}
+	EndGlobalSection
+EndGlobal

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/Component1.razor

@@ -0,0 +1,3 @@
+<div class="my-component">
+    This Blazor component is defined in the <strong>iAspNetCore.RazorComponents</strong> package.
+</div>

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/Component1.razor.css

@@ -0,0 +1,6 @@
+.my-component {
+    border: 2px dashed red;
+    padding: 1em;
+    margin: 1em 0;
+    background-image: url('background.png');
+}

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/ExampleJsInterop.cs

@@ -0,0 +1,39 @@
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace iAspNetCore.RazorComponents
+{
+    // This class provides an example of how JavaScript functionality can be wrapped
+    // in a .NET class for easy consumption. The associated JavaScript module is
+    // loaded on demand when first needed.
+    //
+    // This class can be registered as scoped DI service and then injected into Blazor
+    // components for use.
+
+    public class ExampleJsInterop : IAsyncDisposable
+    {
+        private readonly Lazy<Task<IJSObjectReference>> moduleTask;
+
+        public ExampleJsInterop(IJSRuntime jsRuntime)
+        {
+            moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
+               "import", "./_content/iAspNetCore.RazorComponents/exampleJsInterop.js").AsTask());
+        }
+
+        public async ValueTask<string> Prompt(string message)
+        {
+            var module = await moduleTask.Value;
+            return await module.InvokeAsync<string>("showPrompt", message);
+        }
+
+        public async ValueTask DisposeAsync()
+        {
+            if (moduleTask.IsValueCreated)
+            {
+                var module = await moduleTask.Value;
+                await module.DisposeAsync();
+            }
+        }
+    }
+}

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/_Imports.razor

@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.2" />
+  </ItemGroup>
+
+</Project>

src/5.x/iAspNetCore.RazorComponents/iAspNetCore.RazorComponents/wwwroot/exampleJsInterop.js

@@ -0,0 +1,6 @@
+// This is a JavaScript module that is loaded on demand. It can export any number of
+// functions, and may import other JavaScript modules if required.
+
+export function showPrompt(message) {
+  return prompt(message, 'Type anything here');
+}