Can I use it with Svelte?

[frederikhors]

Is there a way I can use it with Svelte?

[sgywzy]

As stated on the main repo page, it's framework agnostic.
I'm using it and works without problem.
On the other hand someone made a select library for svelte only called svelte-select which I haven't tried!

p.s: As of now this is the first google result for: "tom-select svelte" query, hence why I bump this discussion.

[fsrtechnologies]

Just thought I'd expand on this: yes, you can use it with Svelte, but with some modifications. TomSelect expects to modify the DOM directly; when the Svelte compiler runs, the document doesn't really exist yet, so you'll get lots of rather frustrating errors. I adapted a technique I'd previously used with another component script; here's how I use tom-select:

<script lang="ts">
  import TomSelect from "tom-select";
  import 'tom-select/dist/esm/plugins/remove_button/plugin';
  import 'tom-select/dist/css/tom-select.css';
  // import your custom stylesheet here

  let stateSelect;

  onMount(async () => {
    stateSelect= new TomSelect("#select-state",{
	// your settings go here
    });
  });
</script>

<select id="select-state" name="state[]" multiple placeholder="Select a state..." autocomplete="off">
  <option value="">Select a state...</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="CA" selected>California</option>
</select>

This feels weird to me - we don't do anything with stateSelect after onMount - but it works beautifully.

[Wtower]

This is what works for me:

<script>
    import { onMount } from "svelte";
    import TomSelect from 'tom-select';

    let select_element;
    let value;

    onMount(async () => {
        new TomSelect(select_element, {});
    });
</script>

<select placeholder="Select a state" bind:value bind:this={select_element}>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="CA" selected>California</option>
</select>

[wojciechgeller]

@fsrtechnologies @Wtower i would suggest to modify the code a bit to destroy tom-select event listeners etc. when svelte component gets unmounted to avoid memory leaks.

<script>
    import { onMount, onDestroy } from "svelte";
    import TomSelect from 'tom-select';

    let selectElement;
    let tomSelectInstance;
    let value;

    onMount(async () => {
        tomSelectInstance = new TomSelect(selectElement, {});
    });
    
    onDestroy(() => {
        tomSelectInstance.destroy();
    });
</script>

<select placeholder="Select a state" bind:value={value} bind:this={selectElement}>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="CA" selected>California</option>
</select>