preline: data-hs not working with Svelte

How are you supposed to use components that make use of the data-hs tags like this when using a Framework like Svelte or React?

        <p data-hs-toggle-count='{
            "target": "#toggle-count",
            "min": 19,
            "max": 29
          }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
          19
        </p>

This doesn’t seem to be valid Syntax in JSX, etc. I am just getting a parse error. I tried wrapping the data-hs object like this:

        <p data-hs-toggle-count={{
            "target": "#toggle-count",
            "min": 19,
            "max": 29
          }} class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
          19
        </p>

The component then renders but nothing works.

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 3
Comments: 21 (3 by maintainers)

Most upvoted comments

@olegpix got it to work using something similar:

<script lang="ts">
    import { onMount } from 'svelte';

    onMount(async () => {
        const HSSelect = (await import('preline')).HSSelect;

        const selects: HTMLElement[] = Array.from(document.querySelectorAll('[data-hs-select]'));

        selects.forEach((element: HTMLElement) => {
            new HSSelect(element);
        });
    });
</script>

Sadly, it seems like you have to do this for everything that uses data-hs.

Eric-Arz on Nov 13, 2023