@livescoresnu/footballui/README.md

TBC

# Football UI

A free to use React TailwindCSS Football UI library built around [Sportmonks Football API 3.0](https://www.sportmonks.com) data endpoints

### [Official website →](https://footballui.com/)

### [How to use →](https://footballui.com/guide/)

### [Storybook →](https://components.footballui.com/)

### [Football UI in action →](https://livescores.nu)

## Prerequisites

### Sportmonks API subscription

The Football UI library is build around [Sportmonks Football API 3.0](https://www.sportmonks.com/football-api/) 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](https://docs.sportmonks.com/football).

The creaters of Football UI are not affiliated with Sportmonks and we do not provide any support for their API.

### Technical requirements

### [React 18 →](https://reactjs.org/) or later

### [Tailwind CSS 3.4 →](https://tailwindcss.com/) or later

## Install

```sh
npm i @livescoresnu/footballui
```

To ensure TailwindCSS generates the CSS for the component, add the following to your `index.css`:

```jsx
@source "../node_modules/@livescoresnu/footballui";

```

Optionally, install [TailwindCSS 3D](https://github.com/sambauers/tailwindcss-3d). Only required for the trapezidium variant of the formation field component:

```sh
npm install -D tailwindcss-3d
```

And add the plugin to the plugin section of `tailwind.config.js`:

```jsx
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:

```jsx
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:

```html
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:

```jsx
<EventItem
  fixtureData={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](https://footballui.com/) and can be explored in the [Storybook](https://storybook.footballui.com/)