Basic Usage

Rendering teams

To display teams on the pitch, pass homeTeam and/or awayTeam props. Each team requires a squad object defining player positions.

Home

With the homeTeam prop, the home team is rendered attacking from the left side 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 }]
    }
  };

  return <SoccerLineUp homeTeam={homeTeam} />;
}

1

2

4

5

3

11

6

8

7

9

10

Away

With the awayTeam prop, the home team is rendered attacking from the right side of the field:

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

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

  return <SoccerLineUp awayTeam={awayTeam} />;
}

1

2

4

5

3

6

10

8

11

9

7

Both teams

Using both props, each team will be rendered on 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 }],
        cdm: [{ number: 6 }],
        cm: [{ number: 10 }, { number: 8 }],
        fw: [{ number: 11 }, { number: 9 }, { number: 7 }]
      }
    };

  return <SoccerLineUp homeTeam={homeTeam} awayTeam={awayTeam} />;
}

1

2

4

5

3

11

6

8

7

9

10

1

2

4

5

3

6

10

8

11

9

7

Pitch patterns

The pattern prop adds a visual overlay to the pitch:

Lines

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp pattern="lines" />;
}

Squares

import SoccerLineUp from 'react-soccer-lineup';

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

Circles

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp pattern="circles" />;
}

Pitch colors

Customize the pitch background color with the color prop:

<SoccerLineUp color="#03a6A1" pattern="lines" />

Pitch orientation

The orientation prop controls whether the pitch is displayed horizontally or vertically.

Horizontal

The default orientation. Home team on the left, away team on the right:

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp orientation="horizontal" />;
}

Vertical

Portrait layout. Home team at the bottom, away team at the top:

import SoccerLineUp from 'react-soccer-lineup';

function App() {
  return <SoccerLineUp orientation="vertical" />;
}