Install

npm install react-soccer-lineup

Basic usage

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp />;
}

Render teams

import SoccerLineUp, { type Team } from 'react-soccer-lineup';

function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 1 },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 11 }, { number: 6 }, { number: 8 }, { number: 7 }],
      fw: [{ number: 9 }, { number: 10 }],
    },
    style: {
      borderColor: '#333333',
    },
  };

  const awayTeam: Team = {
    squad: {
      gk: { number: 1 },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
      fw: [{ number: 11 }, { number: 9 }, { number: 7 }],
    },
    style: {
      borderColor: '#ffffff',
    },
  };

  return (
    <SoccerLineUp
      size='responsive'
      color='#327D61'
      pattern='squares'
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}

API

| Prop | Type | Required | Default value | Description | | ------------- | -------- | -------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | | color | string | No | #588f58 | The pitch background color | | size | string | No | 'normal' | Pitch dimensions. Supported values: small, normal, big, responsive, fill | | pattern | string | No | - | The pattern applied to the pitch grass. Supported values: lines, squares, circles | | orientation | string | No | 'horizontal' | The pitch orientation. Supported values: horizontal, vertical | | homeTeam | Team | No | - | The home team | | awayTeam | Team | No | - | The away team |

Team

| Attribute | Type | Required | Default value | Description | | --------- | ------- | -------- | ------------- | ------------------------ | | squad | Squad | Yes | - | The team players by role | | style | Style | No | - | The team style |

Squad

| Attribute | Type | Required | Default value | Description | | --------- | ---------- | -------- | ------------- | --------------------------------------- | | gk | Player | No | - | The squad goalkeeper | | df | Player[] | No | - | The squad defenders | | cdm | Player[] | No | - | The squad central defensive midfielders | | cm | Player[] | No | - | The squad central midfielders | | cam | Player[] | No | - | The squad central attack midfielders | | fw | Player[] | No | - | The squad forwards |

Style

| Attribute | Type | Required | Default value | Description | | ----------------------- | ------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | color | string | No | #ffffff (home) / #333333 (away) | The team color | | borderColor | string | No | #ffffff (home) / #333333 (away) | The team border color | | numberColor | string | No | #333333 (home) / #ffffff (away) | The team number color | | numberBackgroundColor | string | No | - | The team number background color | | pattern | string | No | 'none' | The team jersey pattern | | patternColor | string | No | - | The team jersey pattern color | | nameColor | string | No | #333333 (home) / #ffffff (away) | The team players' name color | | nameBackgroundColor | string | No | - | The team players' name background color | | size | string \| number | No | 'auto' | The player circle diameter. 'auto' scales with the pitch size; 'small' = 24px, 'medium' = 32px, 'big' = 44px; any number sets the diameter in pixels. Fonts, name spacing and borders scale proportionally with explicit sizes | | numberSize | number | No | - | The player number font size in pixels. Overrides the size derived from size | | nameSize | number | No | - | The player name font size in pixels. Overrides the size derived from size | | nameOverflow | string | No | - | Caps the player name to its column width so it never overlaps. 'ellipsis' truncates with …, 'hidden' clips without it. Unset leaves names at full width |

Player

| Attribute | Type | Required | Default value | Description | | --------- | -------------- | -------- | -------------- | ---------------------------------------------- | | name | string | No | - | The displayed player name | | number | number | No | - | The displayed player number | | style | Style | No | The team style | The player style | | offset | PlayerOffset | No | - | The player position offset | | onCLick | Function | No | - | Callback to invoke when clicking on the player |

PlayerOffset

| Attribute | Type | Required | Default value | Description | | --------- | -------- | -------- | ------------- | --------------------- | | x | number | No | 0 | The horizontal offset | | y | number | No | 0 | The vertical offset |

Live

Check the playground here.