svelte-lanyard

svelte-lanyard

A Lanyard API wrapper for Svelte

How to Use

Currently, svelte-lanyard only works clientside, meaning SvelteKit SSR will not work. Learn how to disable SSR on a page-by-page basis here.

By default, svelte-lanyard will attempt to use the WebSocket method of fetching data. See below:

<script lang="ts">
	import { useLanyard } from 'svelte-lanyard';

	const data = useLanyard('182292736790102017');
</script>

{#if $data}
	<p>My Discord username is {$data.discord_user.username}#{$data.discord_user.discriminator}</p>
{:else}
	<p>Waiting to fetch Discord data...</p>
{/if}

If you are building your website for browsers that don't support WebSockets or want to use the REST API instead, you must specify that you want to use the REST API and specify an interval at which to refresh the data:

<script lang="ts">
	import { useLanyard } from 'svelte-lanyard';

	const data = useLanyard('182292736790102017', { type: 'rest', restInterval: 1e3 });
</script>

{#if $data}
	<p>My Discord username is {$data.discord_user.username}#{$data.discord_user.discriminator}</p>
{:else}
	<p>Waiting to fetch Discord data...</p>
{/if}

A demo is also available here.