Electron Projects

Adding a snip toolbar button

Now that we have a draggable window and non-draggable menu buttons, let's add a button so that we can take a screenshot:

1. Update the App.js code and append a new button component with the icon value of camera and with the text Snip, as shown in the following example:

      <Navbar>              <Navbar.Group align={Alignment.LEFT}>                <Navbar.Heading>Electron Snip</Navbar.Heading>                <Navbar.Divider />                <Button className="bp3-minimal" icon="settings"                     text="Settings" />                <Button className="bp3-minimal" icon="help" text="About" />                <Button className="bp3-minimal" icon="camera"                                                       text="Snip"/>              </Navbar.Group>      </Navbar>

2. We also need to add an onSnipClick function stub. This is going to handle our Snip button clicks.
3. For now, let's create ...