Because this library is being currently built for Electron and NW.js, the examples and demos on this site will only work properly in Chrome.

Window

Properties

Property	Type	Description
background	string, bool	Sets the background color of a component, if bool, the color will be used as the background color.
chrome	bool	Sets the chrome of the window.
color	string	Sets the main color of a component and it's children.
height	number	Sets the height of a component.
hidden	bool	Sets the visibility of a component.
horizontalAlignment	string	Sets the horizontal alignment of the component's content Property value "left", "center", "right"
padding	string	Sets the padding inside a component. E.G. "30px 20px"
theme	string	Sets the UI theme that is used by this component and its children elements. Property value "light", "dark"
verticalAlignment	string	Sets the vertical alignment of the component's content. Property value "top", "center", "bottom"
width	number	Sets the width of a component.

Examples

import React, { Component } from 'react';
import { Window, TitleBar, Text } from 'react-desktop/windows';

export default class extends Component {
  static defaultProps = {
    color: '#cc7f29',
    theme: 'light'
  };

  render() {
    return (
      <Window
        color={this.props.color}
        theme={this.props.theme}
        chrome
        height="300px"
        padding="12px"
      >
        <TitleBar title="My Windows Application" controls/>
        <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
      </Window>
    );
  }
}