https://github.com/soenneker/soenneker.blazor.utils.resourceloader

A Blazor JavaScript module for dynamically loading scripts and styles
https://github.com/soenneker/soenneker.blazor.utils.resourceloader

blazor csharp dotnet import javascript module resourceloader script style util utils

Last synced: 3 months ago
JSON representation

A Blazor JavaScript module for dynamically loading scripts and styles

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.utils.resourceloader
• Owner: soenneker
• License: mit
• Created: 2024-06-24T01:01:56.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-09-30T01:24:01.000Z (4 months ago)
• Last Synced: 2024-09-30T07:21:00.338Z (4 months ago)
• Topics: blazor, csharp, dotnet, import, javascript, module, resourceloader, script, style, util, utils
• Language: C#
• Homepage: https://soenneker.com
• Size: 432 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![](https://img.shields.io/nuget/v/soenneker.blazor.utils.resourceloader.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.utils.resourceloader/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.utils.resourceloader/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.utils.resourceloader/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/soenneker.blazor.utils.resourceloader.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.utils.resourceloader/)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) Soenneker.Blazor.Utils.ResourceLoader

### A Blazor JavaScript interop for dynamically loading scripts, styles, and modules

## Overview

The `ResourceLoader` class is designed to manage the loading and initialization of scripts, styles, and JavaScript modules in a Blazor application. It provides methods to asynchronously load scripts and styles, wait for variables to be available, and manage the lifecycle of JavaScript modules.

It ensures that each resource is only loaded once (through this interop), even with multiple concurrent calls.

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

  - [Loading Scripts](#loading-scripts)

  - [Loading Styles](#loading-styles)

  - [Importing Modules](#importing-modules)

  - [Waiting for Variables](#waiting-for-variables)

  - [Disposing Modules](#disposing-modules)

## Installation

```

dotnet add package Soenneker.Blazor.Utils.ResourceLoader

```

## Usage

### Loading Scripts

To load a script, use the `LoadScript` method. It injects the file into the DOM.

```csharp

await resourceLoader.LoadScript("https://example.com/script.js");

```

`LoadScriptAndWaitForVariable` is also available. It waits for a specified JavaScript variable to be available:

```csharp

await resourceLoader.LoadScriptAndWaitForVariable("https://example.com/script.js", "variableName");

```

### Loading Styles

To load a style, use the `LoadStyle` method. It injects the file into the DOM.

```csharp

await resourceLoader.LoadStyle("https://example.com/style.css");

```

### Importing Modules

To import a JavaScript module, use the `ImportModule` method:

```csharp

var module = await resourceLoader.ImportModule("moduleName");

```

You probably want `ImportModuleAndWaitUntilAvailable`, as that waits until the module is loaded, and accessible:

```csharp

// 'ResourceLoader' is the name of the export class

var module = await resourceLoader.ImportModuleAndWaitUntilAvailable("Soenneker.Blazor.Utils.ResourceLoader/resourceloader.js", "ResourceLoader");

```

### Waiting for Variables

To wait for a JavaScript variable to be available, use the `WaitForVariable` method:

```csharp

await resourceLoader.WaitForVariable("variableName");

```

### Disposing Modules

Be sure to dispose of a module after you're done interacting with it. To dispose of a JavaScript module, use the `DisposeModule` method:

```csharp

await resourceLoader.DisposeModule("moduleName");

```