soccer-lineup

⚽ React Soccer Line up - A soccer pitch representation component for React ⚛️

Usage no npm install needed!

<script type="module">
  import soccerLineup from 'https://cdn.skypack.dev/soccer-lineup';
</script>

README

react-soccer-lineup

⚽ React Soccer Line up - A soccer pitch representation component for React ⚛️

NPM JavaScript Style Guide

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={ "circles" }
            />
        )

    }
}

API

Prop Type Required Default value Description
color string No #588f58 #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
color string No - The team players color
squad Squad Yes - The team players by role

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

Player

Attribute Type Required Default value Description
name string No - The displayed player name
number number No - The displayed player number

Live

Check a live example here.

License

MIT © giustini