React Window Titlebar

React Window Titlebar for your electron applications.

In Action

How to install

$ npm install react-window-titlebar

Usage

import TitleBar from 'react-window-titlebar'; // import TitleBar
import {remote} from 'electron'; // get remote object from electron which helps Titlebar to control window actions
// your component
render () {
    return (
        <TitleBar title="The main window title" remote={remote} theme="dark" />
    )
}
// isn't it is so easy ?

Props

title ( String )

Use this to pass a title to toolbar.

remote ( Object )

This is a required prop. TitleBar uses it to control window actions like closing the window.

theme ( String )

Two themes are available out of the box light & dark. Default is light.

• light ( default )
• dark

style ( Object )

Custom style object to control inline styling of the titlebar.

className ( String )

Provide a custom class to titleBar.

hideControls ( Boolean )

Set hideControls true to hide window contol buttons. False by default.

actionsPos ( String )

actionsPos controls where should window control buttons will render. The two available options are :-

• left ( default )
• right

buttons ( Array of Elements )

You can pass array of elements to buttons which will be rendered in opposite side of window controls. I made this for passing additional buttons but you can pass any React element into it.

let sideButtons = [
    <button className="btn btn-default">
        <Icon name="sliders" />
    </button>
];
<TitleBar remote={remote} title={title} theme="light" buttons={sideButtons}/>

Contribte to this component

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull against dev branch :D

When developing your feature you can take advantage of npm run dev script provided in package.json. If you want to test this component run npm run dev inside your development folder & then inside your electron project directory run npm link react-window-titlebar. Now you will be able to import react-window-titlebar like a normal npm module.

Whenever you make a change just run npm run dev again.

About Me

• My website (manojsinghnegi.com)
• Github (@manojsinghnegiwd)
• Twitter (@manojnegiwd) s