generated from saadeghi/svelte-component-template
-
Notifications
You must be signed in to change notification settings - Fork 6
Open
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
Labels
No labels