Types Reference

Exports

The library exports a default component and several TypeScript types:

// Default component
import SoccerLineUp from 'react-soccer-lineup';

// Type imports
import SoccerLineUp, {
  type Team,
  type TeamStyle,
  type Squad,
  type Player,
  type PlayerStyle,
  type PlayerPattern,
  type PlayerSize,
  type NameOverflow,
  type PlayerOffset,
  type PitchSize,
  type PitchPattern,
  type PitchOrientation,
  type PitchViewProps
} from 'react-soccer-lineup';

PitchViewProps

Main component props interface.

interface PitchViewProps {
  color?: string;
  size?: PitchSize;
  pattern?: PitchPattern;
  orientation?: PitchOrientation;
  homeTeam?: Team;
  awayTeam?: Team;
}

PitchSize

Pitch dimension options.

type PitchSize = 'small' | 'normal' | 'big' | 'responsive' | 'fill';

PitchPattern

Available grass patterns.

type PitchPattern = 'lines' | 'squares' | 'circles';

PitchOrientation

Pitch orientation options.

type PitchOrientation = 'horizontal' | 'vertical';

Team

Team configuration object.

type Team = {
  squad: Squad;
  style?: TeamStyle;
};

Squad

Player positions within a team. All positions are optional.

type Squad = {
  gk?: Player | null | undefined;
  df?: (Player | null | undefined)[];
  cdm?: (Player | null | undefined)[];
  cm?: (Player | null | undefined)[];
  cam?: (Player | null | undefined)[];
  fw?: (Player | null | undefined)[];
};

Positions

Key	Full Name	Description
gk	Goalkeeper	Single player in goal
df	Defenders	Back line players
cdm	Central Defensive Midfielders	Defensive midfield line
cm	Central Midfielders	Main midfield line
cam	Central Attacking Midfielders	Attacking midfield line
fw	Forwards	Attacking line

TeamStyle

Styling options for teams.

type TeamStyle = {
  color?: string;
  borderColor?: string;
  numberColor?: string;
  numberBackgroundColor?: string;
  nameColor?: string;
  nameBackgroundColor?: string;
  pattern?: PlayerPattern;
  patternColor?: string;
  size?: PlayerSize;
  numberSize?: number;
  nameSize?: number;
  nameOverflow?: NameOverflow;
};

export type PlayerPattern =
  | 'lines'
  | 'thin-lines'
  | 'thick-lines'
  | 'stripes'
  | 'thin-stripes'
  | 'thick-stripes'
  | 'line'
  | 'thin-line'
  | 'thick-line'
  | 'stripe'
  | 'thin-stripe'
  | 'thick-stripe'
  | 'bar'
  | 'thin-bar'
  | 'thick-bar'
  | 'bars'
  | 'thin-bars'
  | 'thick-bars'
  | 'left-half'
  | 'right-half'
  | 'top-half'
  | 'bottom-half'
  | 'left-slash'
  | 'left-thin-slash'
  | 'left-thick-slash'
  | 'right-slash'
  | 'right-thin-slash'
  | 'right-thick-slash'
  | 'cross'
  | 'x'
  | 'squares'
  | 'none';

PlayerSize

Player marker diameter options.

type PlayerSize = 'small' | 'medium' | 'big' | 'auto' | number;

Value	Diameter
'auto'	Scales with the pitch (default)
'small'	24px
'medium'	32px
'big'	44px
number	Custom diameter in pixels

With explicit sizes, the number and name fonts, the name label spacing and the marker border scale proportionally with the diameter.

NameOverflow

By default player names render at their full width and are never truncated. Setting nameOverflow caps a name to its player column width — so it never overlaps neighbouring players — and chooses how the overflow is truncated.

type NameOverflow = 'ellipsis' | 'hidden';

Value	Behavior
'ellipsis'	Cap to the column width, truncating with a trailing ellipsis (…)
'hidden'	Cap to the column width, clipping the text without an ellipsis

Player

Individual player configuration.

type Player = {
  name?: string;
  number?: number;
  style?: PlayerStyle;
  offset?: PlayerOffset;
  onClick?(): void;
};

Property	Type	Description
name	string	Player name displayed below the marker
number	number	Jersey number displayed on the marker
style	PlayerStyle	Individual player styling (overrides team style)
offset	PlayerOffset	Position adjustment
onClick	() => void	Callback when player marker is clicked

PlayerStyle

Styling options for individual players. The player’s style takes precedence over the team’s style.

type PlayerStyle = {
  color?: string;
  borderColor?: string;
  numberColor?: string;
  numberBackgroundColor?: string;
  nameColor?: string;
  nameBackgroundColor?: string;
  pattern?: PlayerPattern;
  patternColor?: string;
  size?: PlayerSize;
  numberSize?: number;
  nameSize?: number;
  nameOverflow?: NameOverflow;
};

Property	Description	Home Default	Away Default
color	Marker fill color	#ffffff	#333333
borderColor	Marker border color	#ffffff	#333333
numberColor	Player number text color	#333333	#ffffff
nameColor	Player name text color	#333333	#ffffff
nameBackgroundColor	Name label background	transparent	transparent
pattern	Player pattern	none	none
patternColor	Player pattern color	transparent	transparent
size	Marker diameter	'auto'	'auto'
numberSize	Number font size in px, overrides size	-	-
nameSize	Name font size in px, overrides size	-	-
nameOverflow	Name truncation when set; unset = no truncation	-	-

PlayerOffset

Position adjustment for fine-tuning player placement.

type PlayerOffset = {
  x?: number;
  y?: number;
};

Property	Type	Default	Description
x	number	0	Horizontal offset (negative = left, positive = right)
y	number	0	Vertical offset (negative = up, positive = down)

Usage Example

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

function App() {

  const playerStyle: TeamStyle = {
    color: '#c8102e',
    borderColor: '#ffffff',
    numberColor: '#ffffff'
  };

  const captain: Player = {
    name: 'Captain',
    number: 10,
    style: playerStyle,
    offset: { x: 10, y: -5 },
    onClick: () => console.log('Captain clicked!')
  };

  const squad: Squad = {
    gk: { number: 1 },
    df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
    cm: [{ number: 6 }, { number: 8 }, captain, { number: 7 }],
    fw: [{ number: 9 }, { number: 11 }]
  };

  const team: Team = {
    squad,
    style: { borderColor: '#c8102e' }
  };

  return (
    <SoccerLineUp
      color="#327d61"
      pattern="lines"
      size="responsive"
      orientation="horizontal"
      homeTeam={team}
    />
  );
}