React Window Titlebar for your electron applications.

$ npm install react-window-titlebar

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 ?

Use this to pass a title to toolbar.

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

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

• light ( default )
• dark

Custom style object to control inline styling of the titlebar.

Provide a custom class to titleBar.

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

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

• left ( default )
• right

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}/>

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.

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