svelte-point v1.0.10

Svelte Point

Caching, reusing, parallel use all in one hook.

• 📦 Super light 2.4kb (1.2k gzip)
• 🚀 Very easy to use
• 😎 Minimum API for the best experience
• 🔥 Reactive
• 🗒 Type safe

npm add --save-dev svelte-point # or yarn add -D svelte-point

<script lang="ts">
	import { usePoint } from 'svelte-point';

	let params = {
		page: 1
	};

	interface IData {
		page: number;
		data: {
			id: number;
			name: string;
		}[];
	}

	$: point = usePoint<IData>(['products', params], async () => {
		// fetch, axios, trpc, anything...

		try {
			const res = await fetch(`https://reqres.in/api/products?page=${params.page}`);

			return await res.json();
		} catch (err) {
			console.log(err);
			return;
		}
	});

	$: console.log($point.data);
</script>

<div class="flex flex-col">
	<div class="flex mb-4">
		<div
			on:click={() => {
				params.page = 1;
			}}
		>
			<span>Page 1</span>
		</div>

		<div
			on:click={() => {
				params.page = 2;
			}}
		>
			<span>Page 2</span>
		</div>
	</div>

	{#each $point?.data?.data || [] as item}
		<span>{item.name}</span>
	{/each}
</div>