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.

react-soccer-lineup
react-soccer-lineup copied to clipboard

Metadata

react-soccer-lineup

Install

Usage