@livescoresnu/footballui
v1.0.5
Published
TBC
Downloads
14
Maintainers
Readme
Football UI
A free to use React TailwindCSS Football UI library built around Sportmonks Football API 3.0 data endpoints
Official website →
How to use →
Storybook →
Football UI in action →
Prerequisites
Sportmonks API subscription
The Football UI library is build around Sportmonks Football API 3.0 and 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.
For Sportmonks API documentation, tutorials and guides we refer to their extensive documentation.
The creaters of Football UI are not affiliated with Sportmonks and we do not provide any support for their API.
Technical requirements
React 18 → or later
Tailwind CSS 3.4 → or later
Install
npm i @livescoresnu/footballui
To ensure TailwindCSS generates the CSS for the component, add the library path to the content section of tailwind.config.js
:
module.exports = {
content: [
//...
"./node_modules/@livescoresnu/footballui/**/*.{js,jsx,ts,tsx}",
],
//...
Optionally, install TailwindCSS 3D. Only required for the trapezidium variant of the formation field component:
npm install -D tailwindcss-3d
And add the plugin to the plugin section of tailwind.config.js
:
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-3d"),
// ...
],
};
Use
Once you have installed the package you can import the components you want to use in your project:
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:
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
></api_token
></fixture_id>
Where the response is passed as sportmonksApiData to the EventItem components data prop:
<EventItem
data={sportmonksApiData}
showLogos={true}
showEventClockAndStatus={true}
size={"medium"}
isLoading={false}
showAsCard={true}
showEventDate={true}
showScores={true}
showTime={true}
showLeagueLogo={true}
/>
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 and can be explored in the Storybook