0.4.3 • Published 3 years ago
react-soccer-lineup v0.4.3
react-soccer-lineup
⚽ React Soccer Line up - A soccer pitch representation component for React ⚛️
Install
npm install --save react-soccer-lineup
Usage
import React, { Component } from 'react'
import SoccerLineUp from 'react-soccer-lineup'
class Example extends Component {
render () {
return (
<SoccerLineUp
size={ "small" }
color={ "lightseagreen" }
pattern={ "lines" }
/>
)
}
}
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 |
homeTeam | Team | No | - | The left side team |
awayTeam | Team | No | - | The right side 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 | Yes | #f08080 (home) / #add8e6 (away) | The team color |
numberColor | string | Yes | #ffffff (home) / #333333 (away) | The team number color |
nameColor | string | No | #ffffff (home) / #333333 (away) | The team players' name color |
Player
Attribute | Type | Required | Default value | Description |
---|---|---|---|---|
name | string | No | - | The displayed player name |
number | number | No | - | The displayed player number |
color | string | No | The team color | The player color |
numberColor | string | No | The team number color | The player number color |
nameColor | string | No | The team players' name color | The player name color |
onCLick | Function | No | - | Callback to invoke when clicking on the player |
Live
Check a live example here.
License
MIT © giustini