Home Original page

GitHub - alii/use-lanyard: React hook for Lanyard for tracking your Discord presence.

use-lanyard

React hook for lanyard, an easy way to track your Discord presence through REST or WebSocket.

Features

  • Easy to use
  • Zero dependencies
  • TypeScript support
  • WebSocket support
  • Deduplicates network requests
import {useLanyard} from 'use-lanyard';

const DISCORD_ID = '268798547439255572';

export function Lanyard() {
	const {data} = useLanyard(DISCORD_ID);

	return <>...</>;
}

Server-side rendering / initial data

You can also provide initial data to the hook, which will be used until the client is hydrated/able to fetch the latest data.

const {data} = useLanyard(DISCORD_ID, {
	initialData: myInitialDataFromTheServer,
});

// Also works with the WebSocket hook
const data = useLanyardWS(DISCORD_ID, {
	initialData: myInitialDataFromTheServer,
});

Socket

There is also a hook for using the WebSocket that Lanyard provides, here's an example:

import {useLanyardWS} from 'use-lanyard';

const DISCORD_ID = '268798547439255572';

export function Lanyard() {
	const data = useLanyardWS(DISCORD_ID);

	return <>...</>;
}

Advanced usage

If you need access to the underlying response types in TypeScript, you can import them as follows.

import type {Types} from 'use-lanyard';

type User = Types.DiscordUser;

You can also customize the API endpoint that is used, if you wanted to self-host Lanyard.

export function Lanyard() {
	const {data} = useLanyard(DISCORD_ID, {
		api: {
			hostname: 'my-lanyard.app',

			// Tell the hook to use https/wss or http/ws
			secure: true,
		},
	});

	return <>...</>;
}

Acknowledgements