Skip to content

Support svelte 5 #4

@ghost

Description

Svelte introduces runes and changes to event.
I rewrote your component using svelte 5 and typescript.
I do not know your opinion on typescript and therefore did not create pull request.

Here is the code for your reference:

<script lang="ts">
	import { inview } from "svelte-inview";

	let isInView: boolean = $state(false);

	let {
		value,
		initial = 0,
		duration = 3000,
		step = 1,
		roundto = 1,
		format = true,
	}: {
		value: number;
		initial?: number;
		duration?: number;
		step?: number;
		roundto?: number;
		format?: boolean;
	} = $props();

	function formatNumber(input: number) {
		if (format) {
			return Math.round(input).toLocaleString();
		}
		return input;
	}

	let counterResult: number = $state(initial);
	let timers: number;

	while (duration / ((value - initial) / step) < 2) {
		step++;
	}

	timers = setInterval(
		() => {
			if (isInView) {
				if (counterResult < value) {
					counterResult += step;
				} else {
					clearInterval(timers);
					counterResult = Math.round(value / roundto) * roundto;
				}
			}
		},
		duration / ((value - initial) / step),
	);
</script>

<span
	use:inview
	oninview_change={(event: CustomEvent<ObserverEventDetails>) => {
		const { inView } = event.detail;
		isInView = inView;
	}}
>
	{formatNumber(counterResult)}
</span>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions