FootballUI

Getting started

Prerequisites

Sportmonks API

The Football UI library is build around Sportmonks Football API 3.0and a api key is required. Sportmonks offer a 14 day trial and a free plan including the Danish Superliga and Scottish Premiership. We recommend going with the Standard data features, but several of our key components will work with Basic data features.
Sportmonks price planSportmonks price plans as of August 2024
For Sportmonks API documentation, tutorials and guides we refer to their extensivedocumentationThe creaters of Football UI are not affiliated with Sportmonks and we do not provide any support for their API.

Technical requirements

Installation

1. Install the package
1
npm i @livescoresnu/footballui
2. To ensure TailwindCSS generates the CSS for the component, add the library path to the content section of tailwind.config.js
1
module.exports = {
2
  content: [
3
    //...
4
    "./node_modules/@livescoresnu/footballui/**/*.{js,jsx,ts,tsx}",
5
  ],
6
  //...
3. Optionally: Install TailwindCSS 3D. Only required for the trapezidium variant of the formation field component.
1
npm install -D tailwindcss-3d
Add the plugin to the plugin section of tailwind.config.js
1
module.exports = {
2
  theme: {
3
    // ...
4
  },
5
  plugins: [
6
    require('tailwindcss-3d'),
7
    // ...
8
  ],
9
}

Usage

How to use

Once you have installed the package you can import the components you want to use in your project.
1
import { EventItem } from "@livescoresnu/footballui";
Each component is built around a single API request and the data should be passed as the data props to the component. E.g. for the EventItem component, the api request would be as follows for a given fixture_id:
1
https://api.sportmonks.com/v3/football/fixtures/<fixture_id>?includes=events:player_name,minute,result;participants:image_path,name;venue:image_path;scores;periods&api_token=<api_token>
Where the response is passed as sportmonksApiData to the EventItem components data prop.
1
<EventItem
2
  data={sportmonksApiData}
3
  showLogos={true}
4
  showEventClockAndStatus={true}
5
  showGoalScorers={true}
6
  size="large"
7
  isLoading={false}
8
  showAsCard={true}
9
  showEventDate={true}
10
  showScores={true}
11
  showTime={true}
12
  showStadiumBackground={true}
13
  showLeagueLogo={true}
14
/>
Which renders:
Image of France
France
Image of Poland
Poland
1
1
FT
Kylian Mbappé (P)
56'
1-0
Robert Lewandowski (P)
79'
1-1
Each component has a variety of props that can be used to customize the appearance. The props are documented in the component section of the documentation.