Skip to content
React Soccer Lineup

Getting Started

Installation

Section titled “Installation”
Terminal window
npm install react-soccer-lineup

Quick start

Section titled “Quick start”

Import the component and use it in your React application:

import SoccerLineUp from 'react-soccer-lineup';


function App() {
  return <SoccerLineUp />;
}

This renders an empty soccer pitch:

Customizing the Pitch

Section titled “Customizing the Pitch”

Add colors and patterns to enhance the visual appearance:

import SoccerLineUp from 'react-soccer-lineup';


function App() {
  return <SoccerLineUp color="#327d61" pattern="squares" />;
}

Adding teams

Section titled “Adding teams”

Using the props homeTeam and awayTeam, each team will be rendered in its part of the field:

import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: { number: 1 },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 11 }, { number: 6 }, { number: 8 }, { number: 7 }],
      fw: [{ number: 9 }, { number: 10 }]
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: { number: 1 },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
      fw: [{ number: 11 }, { number: 9 }, { number: 7 }]
    }
  };


  return (
    <SoccerLineUp
      color="#327d61"
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}
1
2
4
5
3
11
6
8
7
9
10
1
2
4
5
3
6
8
10
11
9
7

Styling teams

Section titled “Styling teams”

You can fully customize the colors of each team

import SoccerLineUp, { type Team } from 'react-soccer-lineup';


function App() {
  const homeTeam: Team = {
    squad: {
      gk: {
        number: 1,
        style: {
          color: '#d4cea7',
          numberColor: '#712230',
          borderColor: '#712230'
        }
      },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 11 }, { number: 6 }, { number: 8 }, { number: 7 }],
      fw: [{ number: 9 }, { number: 10 }]
    },
    style: {
      color: '#712230',
      numberColor: '#ede9d0',
      borderColor: '#ede9d0'
    }
  };


  const awayTeam: Team = {
    squad: {
      gk: {
        number: 1,
        style: {
          color: '#124d61',
          numberColor: '#daea91',
          borderColor: '#daea91'
        }
      },
      df: [{ number: 2 }, { number: 4 }, { number: 5 }, { number: 3 }],
      cm: [{ number: 6 }, { number: 8 }, { number: 10 }],
      fw: [{ number: 11 }, { number: 9 }, { number: 7 }]
    },
    style: {
      color: '#daea91',
      numberColor: '#0a3a4b',
      borderColor: '#0a3a4b'
    }
  };


  return (
    <SoccerLineUp
      color="#327d61"
      pattern="squares"
      homeTeam={homeTeam}
      awayTeam={awayTeam}
    />
  );
}
1
2
4
5
3
11
6
8
7
9
10
1
2
4
5
3
6
8
10
11
9
7

TypeScript support

Section titled “TypeScript support”

The library includes full TypeScript definitions. Import the types you need directly:

import SoccerLineUp, {
  type Team,
  type TeamStyle,
  type Squad,
  type Player,
  type PlayerStyle,
  type PlayerPattern,
  type PlayerOffset,
  type PitchSize,
  type PitchPattern,
  type PitchOrientation,
  type PitchViewProps
} from 'react-soccer-lineup';

Next steps

Section titled “Next steps”