formation-creator v1.2.0

Formation Creator

Simple customizable drag and drop sports formation and tactic creator using svg.

Basic Usage

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
    />
  );
};

This will create a basic field using the existing 7-a-side soccer templates for both fields and players. Players can be dragged and dropped into new spots on the field.

Callbacks

Use the onDrop callback executed when a player has been dropped into a new position to retrieve data on current positions of players. All players are passed back as the only argument.

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
      onDrop={(updatedPlayers) => {
        console.log(updatedPlayers);
      }}
    />
  );
};

Draw Mode

Use draw mode to allow users to dynamically add lines to the field, showing direction of runs to be made, etc.

import React, { useState } from "react";
import FormationCreator, { fields, players } from "formation-creator";

const MyCreator = () => {
  const [players, setPlayers] = useState(
    players.soccer["7"]["2-1-2-1"].players
  );
  const [lines, setLines] = useState([]);

  return (
    <FormationCreator
      field={fields.soccer["7"]}
      players={players}
      setPlayers={setPlayers}
      lines={lines}
      setLines={setLines}
      drawMode={{
        lineColor: "red",
        withMarker: true,
        onDrawEnd: (newLines) => {
          console.log(newLines);
        },
      }}
    />
  );
};

Draw Mode Props

Other Props

Utility Functions

Custom Field Creation

You can use the available base fields from the json file, or create your own.

Field Props

Line Props

Custom Player Creation

There are available preset formations available in the players json file, or you can create your own.

Player Props