Football Standings Widget shows the standings of the most important football leagues. You can integrate this widget in your Web Application using NPM or using the CDN. The widget works with Angular, React and others modern frontend Frameworks or libraries. The widget was created using Mobile first approach and is also customizable.
THE PROJECT IS CURRENTLY WORK IN PROGRESS
To use our widget you need to enable a public key from football-data.
| Key | Competition |
|---|---|
| SA | Serie A |
| PL | Premier League |
| PD | Liga |
| BL1 | Bundesliga |
| FL1 | Ligue |
| DED | Eredivise |
npm i --save gm-football-standings// APP.MODULE.TS
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
// MAIN.TS
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from 'gm-football-standings/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements();
// APP.COMPONENT.HTML
<gm-football-standings competition="SA" season="2019" key="public-key-here"></gm-football-standings>import React from 'react';
import ReactDOM from 'react-dom';
import { defineCustomElements } from 'gm-football-standings/loader';
ReactDOM.render(
<div>
<gm-football-standings competition="SA" season="2019" key="public-key-here">
</gm-football-standings>
</div>,
document.getElementById('root'));
defineCustomElements();<body>
<gm-football-standings competition="SA" season="2019" key="public-key-here">
</gm-football-standings>
<script type="module" src="https://unpkg.com/gm-football-standings/dist/gm-football-standings/gm-football-standings.esm.js"></script>
</body>✅ Chrome
✅ Firefox
✅ Safari
✅ Edge (New Version)
- WebComponents
- Typescript
- StencilJS
- Sass
- Css Variables
Keep calm and code!
