O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the TitleBar component

The next component will represent the title bar:

./app/ts/Components/TitleBar.tsx

import * as React from "react"; 
import { remote } from "electron"; 
import { Header, Navigation, Icon } from "react-mdl"; 
 
export default class TitleBar extends React.Component<{}, {}> { 
 
  private onClose = () => { 
    remote.getCurrentWindow().close(); 
  } 
  render() { 
    return ( 
     <Header  scroll> 
        <Navigation> 
            <a href="#" onClick={this.onClose}><Icon name="close" />            </a> 
        </Navigation> 
    </Header> 
    ); 
  } 
} 

Here, we set up the look and feel using the Header, Navigation, and Icon components of React MDL and subscribe for the click event on the close icon. Furthermore, we import the remote object of the electron module and, by using the getCurrentWindow ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required