Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/barbarbar338/react-use-lanyard

🚀 Use Lanyard API easily in your React app!
https://github.com/barbarbar338/react-use-lanyard

hook hooks lanyard react react-hook react-hooks react-ts react-typescript ts typescript websocket ws

Last synced: 5 days ago
JSON representation

🚀 Use Lanyard API easily in your React app!

Host: GitHub
URL: https://github.com/barbarbar338/react-use-lanyard
Owner: barbarbar338
License: gpl-3.0
Created: 2021-05-10T11:52:33.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-12-06T03:56:47.000Z (about 2 months ago)
Last Synced: 2025-01-19T14:14:25.594Z (13 days ago)
Topics: hook, hooks, lanyard, react, react-hook, react-hooks, react-ts, react-typescript, ts, typescript, websocket, ws
Language: TypeScript
Homepage: https://npmjs.com/react-use-lanyard
Size: 82 KB
Stars: 62
Watchers: 2
Forks: 6
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        [![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)



  

  
React Use Lanyard


  


    Use Lanyard API easily in your React app!

    


    Get support »

    


    


    Report Bug

    ·

    Request Feature

    ·

    What Is Lanyard

  


# 📦 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: "952574663916154960",

	});

	return (

		
{!lanyard.isValidating && JSON.stringify(lanyard, null, 4)}

	);

}

export default App;

```

Using with websocket:

```js

import { useLanyard } from "react-use-lanyard";

function App() {

	const { loading, status /*, websocket */ } = useLanyard({

		userId: "952574663916154960",

		socket: true,

	});

	return 
{!loading && JSON.stringify(status, null, 4)};

}

export default App;

```

# 🔐 KV Support

You can create/delete KV pairs using this package.

```js

import { set, del } from "react-use-lanyard";

// Set KV pair

await set({

	apiKey: "your_api_key", // get it using .apikey command on lanyard bot

	userId: "your_user_id",

	key: "test_key",

	value: "test value",

	// apiUrl: "lanyard.338.rocks", // if you are using self-hosted api, not required by default

});

// Delete KV pair

await del({

	apiKey: "your_api_key",

	userId: "your_user_id",

	key: "test_key",

	// apiUrl: "lanyard.338.rocks", // if you are using self-hosted api, not required by default

});

```

# 🤞 Using Self-Hosted API

You can use this package to connect to your own self-hosted Lanyard API. To do this, you need to pass the `apiUrl` option to the `useLanyard` hook. See [Lanyard self-hosting guide](https://github.com/Phineas/lanyard#self-host-with-docker) for more information.

Using without websocket:

```js

import { useLanyard } from "react-use-lanyard";

function App() {

	const lanyard = useLanyard({

		userId: "952574663916154960",

		apiUrl: "lanyard.338.rocks",

	});

	return (

		
{!lanyard.isValidating && JSON.stringify(lanyard, null, 4)}

	);

}

export default App;

```

Using with websocket:

```js

import { useLanyard } from "react-use-lanyard";

function App() {

	const { loading, status /*, websocket */ } = useLanyard({

		userId: "952574663916154960",

		socket: true,

		apiUrl: "lanyard.338.rocks",

	});

	return 
{!loading && JSON.stringify(status, null, 4)};

}

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

Feel 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)