https://github.com/soenneker/soenneker.blazor.tomselect

A Blazor interop library for the select user control library, Tom Select
https://github.com/soenneker/soenneker.blazor.tomselect

blazor csharp dotnet input interop select tom tom-select tomselect

Last synced: about 3 hours ago
JSON representation

A Blazor interop library for the select user control library, Tom Select

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.tomselect
• Owner: soenneker
• License: mit
• Created: 2024-03-01T23:03:05.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-12-19T08:47:21.000Z (28 days ago)
• Last Synced: 2024-12-19T09:24:33.751Z (27 days ago)
• Topics: blazor, csharp, dotnet, input, interop, select, tom, tom-select, tomselect
• Language: C#
• Homepage: https://soenneker.com
• Size: 2.4 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

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

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

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

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

### A Blazor interop library for the select user control library, Tom Select

This library simplifies the integration of Tom Select into Blazor applications, providing access to options, methods, plugins, and events. A demo project showcasing common usages is included.

Diligence was taken to align the Blazor API with JS. Refer to the [Tom Select documentation](https://tom-select.js.org/) for details.

## Installation

```

dotnet add package Soenneker.Blazor.TomSelect

```

### Add the following to your `Startup.cs` file

```csharp

public void ConfigureServices(IServiceCollection services)

{

    services.AddTomSelectInteropAsScoped();

}

```

## Usage

```razor

@using Soenneker.Blazor.TomSelect

 // Supports two-way binding

@code{

    private TomSelect _tomSelect = default!;

    private List? _selectedCountries = [];

    private List? _countries;

    private readonly TomSelectConfiguration _configuration = new()

    {

        Plugins = [TomSelectPluginType.DragDrop]

    };

    protected override async Task OnInitializedAsync()

    {

        _countries = await Http.GetFromJsonAsync>("sample-data/countries.json");

    }

    private void OnItemAdd((string str, TomSelectOption obj) result)

    {

        Logger.LogInformation("OnItemAdd fired: Value: {value}", str);

    }

    private void LogSelectedItems()

    {

        foreach (Country item in _selectedCountries)

        {

            Logger.LogInformation("Selected item: {0}", item.Name);

        }

    }

}

```