Problem Solved

The "react-squad-builder" library simplifies the creation of a football starting XI by providing a pitch with 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 fully responsive, ensuring proper functionality on both desktop and mobile devices. Its simplicity makes it easy to integrate and use in any React application.

Technologies Used

I built the library using React with Vite for fast development and Tailwind for styling. It is available on NPM.

The library provides:

• - support for various formations
• - customizable jersey color
• - customizable jersey text color
• - customizable jersey text
• - ability to save the starting XI as an image
• - simple to add new translations

Images