In this chapter, we are going to build a small screenshot snipping tool using the latest Electron framework, React.js, and the Blueprint UI toolkit for React.

As part of the practical exercise in this chapter, you are going to generate screenshots using the Electron API and manage the application's window state and visibility. This will help you understand how to control application windows in Electron. You will also be working with desktopCapture features and generating thumbnails from code. Finally, you will learn how to integrate with the System Tray and invoke its functionality with the global keyboard shortcut.

In this chapter, we will learn about the following topics:

• Preparing the project
• Configuring frameless windows
• Transparent windows
• Making application windows draggable
• Adding a Snip toolbar button
• Using the desktopCapturer API
• Calculating the primary display size
• Generating and saving a thumbnail image
• Resizing and cropping the image
• Testing the application's behavior
• Integrating with the system tray
• Hiding the main application window on startup
• Registering global keyboard shortcuts