titlebar-react

Emulate OS X window title bar. Extracted from mafintosh/playback and then forked from kapetan/titlebar.

See the live demo (Without React).

npm install titlebar-react

import React from 'react';
import Titlebar from 'titlebar-react';

class Window extends React.Component {
    handleClose(e) {
        console.log('closing');
    }
    
    handleMinimize(e) {
        console.log('minimize');
    }
    
    handleMaximize(e) {
        console.log('maximize');
    }
    
    handleFullScreen(e) {
        console.log('fullscreen');
    }

    render() {
        return (
            <div className="r-win">
                <Titlebar
                    draggable={true}
                    handleClose={this.handleClose}
                    handleMinimize={this.handleMinimize}
                    handleMaximize={this.handleMaximize}
                    handleFullScreen={this.handleFullScreen}>

                    /* any other React component here */
                </Titlebar>
            </div>
        );
    }
}

// then simply add to DOM
React.render({
    <Window />,
    document.body
});

Usage

The returned instance emits four events: close, minimize, fullscreen (each corresponding to one of the stoplight buttons) and maximize when double clicking on the title bar area, or holding down alt key and clicking fullscreen.

Instead of emitting four events, you get to define what each event will do by passing callbacks to this.props.

<Titlebar
    handleClose={this.handleClose}
    handleMinimize={this.handleMinimize}
    handleMaximize={this.handleMaximize}
    handleFullScreen={this.handleFullScreen} />

available props

• draggable (default false): Enable dragging.
• handleClose: called when close is clicked
• handleMinimize: called when minimized is clicked
• handleMaximize: called when maximize is clicked
• handleFullScreen: called when fullscreen is clicked