A colleague and I have been working on a management system for a co-working space that's opening soon.

One of the features we recently built is receipt printing for every session recorded in the system, including session duration, ordered items, applied discounts, and other relevant details.

Our first thought was to use 'window.print()' (for anyone unfamiliar, it's a built-in browser function). The problem was that it attempts to print the entire page, and creating a dedicated page just to display a receipt wasn't really practical especially during busy hours when staff need to move quickly.

After a bit of research, we ended up using 'react-to-print;.

The library provides a simple hook that lets you print a specific React component by passing its ref, while handling the rest behind the scenes. You can even keep the printable component hidden from the actual page.

The printing functionality itself wasn't the difficult part.

The real challenge was designing a reusable component that could work across multiple areas of the system: regular sessions, room bookings, standalone orders, and more.

Although it looks like nothing more than a simple "Print Receipt" button on the UI, there's a lot happening behind the scenes: validations, conditions, data transformations, and different rendering scenarios, to make it flexible enough to work everywhere.

The screenshots show the feature before and after the battle we had with it 😂