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.

View

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.
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"
layout string Sets the direction of the content.
Property value "horizontal", "vertical"
margin string Sets the outer margin of a component.
E.G. "30px 20px"
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 { View, Text } from 'react-desktop/windows';

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

  render() {
    return (
      <View
        color={this.props.color}
        background
        padding="20px"
        horizontalAlignment="center"
        verticalAlignment="center"
        width="200px"
        height="100px"
      >
        <Text color={this.props.theme === 'dark' ? 'white' : '#333'}>Hello World</Text>
      </View>
    );
  }
}