https://github.com/alii/use-lanyard

React hook for Lanyard for tracking your Discord presence.
https://github.com/alii/use-lanyard

discord hook presence react

Last synced: 5 days ago
JSON representation

React hook for Lanyard for tracking your Discord presence.

• Host: GitHub
• URL: https://github.com/alii/use-lanyard
• Owner: alii
• License: mit
• Created: 2021-03-13T12:52:38.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-05T17:00:13.000Z (4 months ago)
• Last Synced: 2024-12-13T07:43:14.809Z (13 days ago)
• Topics: discord, hook, presence, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-lanyard
• Size: 602 KB
• Stars: 83
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `use-lanyard`

React hook for [lanyard](https://github.com/Phineas/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

```tsx

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.

```tsx

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:

```tsx

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.

```ts

// See src/types.ts for all types

import type {Data, Activity, LanyardResponse} from 'use-lanyard';

```

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

```ts

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

- [Phineas Walton](https://github.com/Phineas/) – Author of lanyard

- [Alistair Smith](https://github.com/alii/) – Author of this library