API Overview

Component signature

const SoccerLineUp: React.FC<PitchViewProps>;

API

The component accepts props defined in PitchViewProps:

Prop	Type	Required	Default value	Description
color	string	No	#588f58	The pitch background color
size	PitchSize	No	"normal"	Pitch dimensions
pattern	PitchPattern	No	-	The pattern applied to the pitch grass
orientation	PitchOrientation	No	"horizontal"	The pitch orientation
homeTeam	Team	No	-	The home team
awayTeam	Team	No	-	The away team

PitchSize

Value	Width	Height
"small"	600px	350px
"normal"	900px	525px
"big"	1200px	700px
"responsive"	100%	Auto (12:7 ratio)
"fill"	100%	100%

PitchPattern

Value	description
"lines"	Horizontal line pattern
"squares"	Grid / checkerboard pattern
"circles"	Circular dot pattern

PitchOrientation

Value	Description
"horizontal"	Landscape layout. Home team on the left, away team on the right
"vertical"	Portrait layout. Home team at the bottom, away team at the top

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 marker diameter: "small" (24px), "medium" (32px), "big" (44px), "auto" (scales with the pitch) or a custom number of pixels
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