Problem Solved

The "react-squad-builder" library simplifies the creation of a football starting XI. It offers a pitch featuring players and a bench. Users can easily add or swap players on the pitch. Simply include the component and define the players, the component handles the rest. The library is responsive, which means it also works properly on mobile devices. It's uncomplicated to include/use in your react project.

Technologies Used

I used React with Vite and used Tailwind for the CSS. The library is available on NPM.

The library provides:

• - various formations
• - customizable jersey color
• - customizable jersey text color
• - customizable jersey text
• - saving of the starting XI as an image
• - easy to add additional translations

Images