Skip to content

API Overview

const SoccerLineUp: React.FC<PitchViewProps>;

The component accepts props defined in PitchViewProps:

PropTypeRequiredDefault valueDescription
colorstringNo#588f58The pitch background color
sizePitchSizeNo"normal"Pitch dimensions
patternPitchPatternNo-The pattern applied to the pitch grass
orientationPitchOrientationNo"horizontal"The pitch orientation
homeTeamTeamNo-The home team
awayTeamTeamNo-The away team
ValueWidthHeight
"small"600px350px
"normal"900px525px
"big"1200px700px
"responsive"100%Auto (12:7 ratio)
"fill"100%100%
Valuedescription
"lines"Horizontal line pattern
"squares"Grid / checkerboard pattern
"circles"Circular dot pattern
ValueDescription
"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
AttributeTypeRequiredDefault valueDescription
squadSquadYes-The team players by role
styleStyleNo-The team style
AttributeTypeRequiredDefault valueDescription
gkPlayerNo-The squad goalkeeper
dfPlayer[]No-The squad defenders
cdmPlayer[]No-The squad central defensive midfielders
cmPlayer[]No-The squad central midfielders
camPlayer[]No-The squad central attack midfielders
fwPlayer[]No-The squad forwards
AttributeTypeRequiredDefault valueDescription
colorstringNo#ffffff (home) / #333333 (away)The team color
borderColorstringNo#ffffff (home) / #333333 (away)The team border color
numberColorstringNo#333333 (home) / #ffffff (away)The team number color
numberBackgroundColorstringNo-The team number background color
patternstringNo"none"The team jersey pattern
patternColorstringNo-The team jersey pattern color
nameColorstringNo#333333 (home) / #ffffff (away)The team players’ name color
nameBackgroundColorstringNo-The team players’ name background color
AttributeTypeRequiredDefault valueDescription
namestringNo-The displayed player name
numbernumberNo-The displayed player number
styleStyleNoThe team styleThe player style
offsetPlayerOffsetNo-The player position offset
onCLickFunctionNo-Callback to invoke when clicking on the player
AttributeTypeRequiredDefault valueDescription
xnumberNo0The horizontal offset
ynumberNo0The vertical offset