steamcards.js v1.0.6

SteamCards Node Package

(C) 2022 by Daniel Brendel

Released under the MIT license

About

SteamCards is a clientside web component that offers an easy way to integrate Steam Cards of various Steam entities into your website. Therefore you only need very few code in order to render Steam Cards into your document.

SteamCards is used via JavaScript. Since JavaScript is supported by all major browser per default it is platform independent and compatible.

The following Widgets are currently available:

• Steam App Widget
• Steam Server Widget
• Steam User Widget

Installation

npm i steamcards.js

import 'steamcards.js'; //Import all available widgets

import 'steamcards.js/steam_app'; //Import Steam App Widget
import 'steamcards.js/steam_server'; //Import Steam Server Widget
import 'steamcards.js/steam_user'; //Import Steam User Widget

Steam App

When referenced the required Steam App module, the minimum code to render a card is as follows:

<steam-app appid="620"></steam-app>

This renders the following card:

You can define these options:

You can also dynamically create Steam Cards via JavaScript:

<div id="app-card"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamApp('#app-card', {
            appid: '620',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>

The following methods are available for a Steam App element / object:

Steam Server

When referenced the required Steam Server module, the minimum code to render a card is as follows:

<steam-server addr="ip:port"></steam-server>

This renders the following card:

You can define these options:

You can also dynamically create Steam Server cards via JavaScript:

<div id="server-card"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	let card = new SteamServer('#server-card', {
		addr: 'ip:port',
		//You can specify the same attributes as shown in the table above
	});
});
</script>

The following methods are available for a Steam Server element / object:

Steam User

When referenced the required Steam User module, the minimum code to render a card is as follows:

<steam-user steamid="id"></steam-user>

This renders the following card:

You can define these options:

You can also dynamically create Steam User cards via JavaScript:

<div id="user-card"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamUser('#user-card', {
            steamid: 'id',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>

The following methods are available for a Steam User element / object: