🎉 Initialize

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc

@@ -0,0 +1,24 @@
+{
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"project": "tsconfig.json",
+		"sourceType": "module"
+	},
+	"plugins": ["@typescript-eslint/eslint-plugin"],
+	"extends": [
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended",
+		"prettier",
+		"prettier/@typescript-eslint"
+	],
+	"root": true,
+	"env": {
+		"node": true
+	},
+	"rules": {
+		"@typescript-eslint/interface-name-prefix": "off",
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"@typescript-eslint/explicit-module-boundary-types": "off",
+		"@typescript-eslint/no-explicit-any": "off"
+	}
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn.lock

.npmignore

@@ -0,0 +1,10 @@
+assets
+node_modules
+src
+.eslintignore
+.eslintrc
+.gitignore
+.npmignore
+.prettierignore
+.prettierrc
+yarn.lock

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"bracketSpacing": true,
+	"singleQuote": false,
+	"endOfLine": "crlf",
+	"trailingComma": "all",
+	"semi": true
+}

README.md

@@ -0,0 +1,108 @@
+[![stars](https://img.shields.io/github/stars/barbarbar338/react-use-lanyard?color=yellow&logo=github&style=for-the-badge)](https://github.com/barbarbar338/react-use-lanyard)
+[![license](https://img.shields.io/github/license/barbarbar338/react-use-lanyard?logo=github&style=for-the-badge)](https://github.com/barbarbar338/react-use-lanyard)
+[![supportServer](https://img.shields.io/discord/711995199945179187?color=7289DA&label=Support&logo=discord&style=for-the-badge)](https://discord.gg/BjEJFwh)
+[![forks](https://img.shields.io/github/forks/barbarbar338/react-use-lanyard?color=green&logo=github&style=for-the-badge)](https://github.com/barbarbar338/react-use-lanyard)
+[![issues](https://img.shields.io/github/issues/barbarbar338/react-use-lanyard?color=red&logo=github&style=for-the-badge)](https://github.com/barbarbar338/react-use-lanyard)
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/barbarbar338/react-use-lanyard/main/assets/readme.png" alt="Logo" />
+  <h3 align="center">React Use Lanyard</h3>
+
+  <p align="center">
+    Use Lanyard API easily in you React app!
+    <br />
+    <a href="https://discord.gg/BjEJFwh"><strong>Get support »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/barbarbar338/react-use-lanyard/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/barbarbar338/react-use-lanyard/issues">Request Feature</a>
+    ·
+    <a href="https://github.com/Phineas/lanyard">What Is Lanyard</a>
+  </p>
+</p>
+
+# 📦 Installation
+
+-   Using yarn: `yarn add react-use-lanyard`
+-   Using npm: `npm i react-use-lanyard`
+
+# 🤓 Usage
+
+Using without websocket:
+
+```js
+import { useLanyard } from "react-use-lanyard";
+
+function App() {
+	const lanyard = useLanyard({
+		userId: "331846231514939392",
+	});
+
+	return (
+		<pre>{!lanyard.isValidating && JSON.stringify(lanyard, null, 4)}</pre>
+	);
+}
+
+export default App;
+```
+
+Using with websocket:
+
+```js
+import { useEffect, useState } from "react";
+import { useLanyard } from "react-use-lanyard";
+
+function App() {
+	const [state, setState] = useState();
+	const lanyard = useLanyard({
+		userId: "331846231514939392",
+		socket: true,
+	});
+
+	useEffect(() => {
+		lanyard.addEventListener("message", ({ data }) => {
+			const { d: status } = JSON.parse(data);
+			setState(status);
+		});
+
+		return () => lanyard.close();
+	}, []);
+
+	return <pre>{JSON.stringify(state, null, 4)}</pre>;
+}
+
+export default App;
+```
+
+# 📄 License
+
+Copyright © 2021 [Barış DEMİRCİ](https://github.com/barbarbar338).
+
+Distributed under the [GPL-3.0](https://www.gnu.org/licenses/gpl-3.0.html) License. See `LICENSE` for more information.
+
+# 🧦 Contributing
+
+Fell free to use GitHub's features.
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/my-feature`)
+3. Run prettier and eslint (`npm run format && npm run lint`)
+4. Commit your Changes (`git commit -m 'my awesome feature my-feature'`)
+5. Push to the Branch (`git push origin feature/my-feature`)
+6. Open a Pull Request
+
+# 🔥 Show your support
+
+Give a ⭐️ if this project helped you!
+
+# 📞 Contact
+
+-   Mail: [email protected]
+-   Discord: https://discord.gg/BjEJFwh
+-   Instagram: https://www.instagram.com/ben_baris.d/
+
+# ✨ Special Thanks
+
+-   [Phineas](https://github.com/Phineas) - Creator of [Lanyard API](https://github.com/Phineas/lanyard)
+-   [Eggsy](https://github.com/eggsy) - Creator of [vue-lanyard](https://www.npmjs.com/package/@eggsydev/vue-lanyard)

package.json

@@ -0,0 +1,47 @@
+{
+	"name": "react-use-lanyard",
+	"version": "0.0.3",
+	"main": "dist",
+	"typings": "dist",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/barbarbar338/react-use-lanyard"
+	},
+	"author": {
+		"email": "[email protected]",
+		"name": "Barış DEMİRCİ",
+		"url": "https://bariscodes.me/"
+	},
+	"license": "GPL-3.0",
+	"description": "🚀 Use Lanyard API easily in you React app!",
+	"scripts": {
+		"prebuild": "rimraf dist",
+		"build": "tsc",
+		"format": "prettier --write .",
+		"format:watch": "onchange . -- prettier --write {{changed}}",
+		"lint": "eslint --fix .",
+		"lint:watch": "onchange . -- eslint --fix {{changed}}"
+	},
+	"devDependencies": {
+		"@types/node": "^14.14.16",
+		"@types/react": "^17.0.5",
+		"@types/react-dom": "^17.0.3",
+		"@typescript-eslint/eslint-plugin": "^4.11.1",
+		"@typescript-eslint/parser": "^4.11.1",
+		"eslint": "^7.16.0",
+		"eslint-config-prettier": "^7.1.0",
+		"eslint-plugin-import": "^2.22.1",
+		"onchange": "^7.1.0",
+		"prettier": "^2.2.1",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"ts-node": "^9.1.1",
+		"typescript": "^4.1.3"
+	},
+	"peerDependencies": {
+		"react": ">=16"
+	},
+	"dependencies": {
+		"swr": "^0.5.6"
+	}
+}

src/constants.ts

@@ -0,0 +1,2 @@
+export const API_URL = "https://api.lanyard.rest/v1";
+export const WEBSOCKET_URL = "wss://api.lanyard.rest/socket";

src/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./constants";
+export * from "./lanyard";

src/lanyard.ts

@@ -0,0 +1,70 @@
+import { API_URL, WEBSOCKET_URL } from "./constants";
+import { LanyardOptions, LanyardResponse } from "./types";
+import useSWR from "swr";
+
+export const useLanyard = (options: LanyardOptions) => {
+	const supportsWebSocket = "WebSocket" in window || "MozWebSocket" in window;
+	if (options.socket && !supportsWebSocket)
+		throw new Error("Browser doesn't support WebSocket connections.");
+
+	if (options.socket) {
+		const socket = new WebSocket(WEBSOCKET_URL);
+		let key = "subscribe_to_id";
+		if (typeof options.userId === "object") key = "subscribe_to_ids";
+
+		socket.addEventListener("open", () => {
+			socket.send(
+				JSON.stringify({
+					op: 2,
+					d: {
+						[key]: options.userId,
+					},
+				}),
+			);
+
+			setInterval(() => {
+				socket.send(
+					JSON.stringify({
+						op: 3,
+					}),
+				);
+			}, 30000);
+		});
+
+		return socket;
+	} else {
+		if (typeof options.userId === "string") {
+			return useSWR<LanyardResponse>(
+				`lanyard:${options.userId}`,
+				async () => {
+					const req = await fetch(
+						`${API_URL}/users/${options.userId}`,
+					);
+
+					const body = (await req.json()) as LanyardResponse;
+					if (body.error) throw new Error(body.error.message);
+
+					return body;
+				},
+			);
+		} else {
+			return useSWR<LanyardResponse[]>(
+				`lanyard:${options.userId.join(":")}`,
+				async () => {
+					const responseArray = [];
+
+					for (const id of options.userId) {
+						const req = await fetch(`${API_URL}/users/${id}`);
+
+						const body = (await req.json()) as LanyardResponse;
+						if (body.error) throw new Error(body.error.message);
+
+						responseArray.push(body);
+					}
+
+					return responseArray;
+				},
+			);
+		}
+	}
+};

src/types.ts

@@ -0,0 +1,80 @@
+/**
+ * Special thanks to @eggsy
+ * https://github.com/eggsy/vue-lanyard/blob/main/%40types/lanyard.d.ts
+ */
+
+export interface LanyardOptions {
+	userId: string | string[];
+	socket?: boolean;
+}
+
+export interface LanyardResponse {
+	success: boolean;
+	data: LanyardData;
+	error?: {
+		message: string;
+		code: string;
+	};
+}
+
+export interface LanyardData {
+	spotify?: Spotify;
+	listening_to_spotify: boolean;
+	discord_user: Discorduser;
+	discord_status: string;
+	activities: Activity[];
+	active_on_discord_mobile: boolean;
+	active_on_discord_desktop: boolean;
+}
+
+export interface Spotify {
+	track_id: string;
+	timestamps: Timestamps;
+	song: string;
+	artist: string;
+	album_art_url: string;
+	album: string;
+}
+
+export interface Timestamps {
+	start: number;
+	end: number;
+}
+
+export interface Activity {
+	type: number;
+	state: string;
+	name: string;
+	id: string;
+	emoji?: Emoji;
+	created_at: number;
+	application_id?: string;
+	timestamps?: Timestamps;
+	session_id?: string;
+	details?: string;
+	buttons?: string[];
+	assets?: Assets;
+}
+
+export interface Assets {
+	small_text: string;
+	small_image: string;
+	large_text: string;
+	large_image: string;
+}
+
+export interface Timestamps {
+	start: number;
+}
+
+export interface Emoji {
+	name: string;
+}
+
+export interface Discorduser {
+	username: string;
+	public_flags: number;
+	id: string;
+	discriminator: string;
+	avatar: string;
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"compilerOptions": {
+		"module": "esnext",
+		"lib": ["dom", "esnext"],
+		"declaration": true,
+		"sourceMap": true,
+		"removeComments": false,
+		"allowSyntheticDefaultImports": true,
+		"target": "es6",
+		"outDir": "./dist",
+		"baseUrl": "./",
+		"incremental": true,
+		"moduleResolution": "node",
+		"esModuleInterop": true,
+		"strict": true,
+		"jsx": "react",
+		"forceConsistentCasingInFileNames": true
+	},
+	"exclude": ["node_modules", "dist"]
+}