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.

Text

Properties

Property Type Description
background string Sets the background color of a component.
bold bool, number, string Sets the bold value of a component.
color string Sets the color of the text.
height string, number Sets the height of a component.
hidden bool Sets the visibility of a component.
margin string, number Sets the outer margin of a component.
E.G. "30px 20px"
marginBottom string, number Sets the outer margin bottom of a component.
marginLeft string, number Sets the outer margin left of a component.
marginRight string, number Sets the outer margin right of a component.
marginTop string, number Sets the outer margin top of a component.
padding string, number Sets the padding inside a component.
E.G. "30px 20px"
paddingBottom string, number Sets the padding bottom inside a component.
paddingLeft string, number Sets the padding left inside a component.
paddingRight string, number Sets the padding right inside a component.
paddingTop string, number Sets the padding top inside a component.
size string, number Sets the font size of a component.
textAlign string Sets the text alignment of the component's content.
Property value "left", "center", "right"
width string, number Sets the width of a component.

Examples

import React, { Component } from 'react';
import { Text } from 'react-desktop/macOs';

export default class extends Component {
  render() {
    return (
      <Text padding="0 100px" textAlign="center" size="16">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam justo urna, posuere vitae est et, accumsan
        bibendum sapien. Suspendisse lobortis mollis finibus. Nunc tincidunt enim est, efficitur semper dolor luctus
        eget. Donec faucibus dolor id leo tincidunt, condimentum mattis augue finibus. Etiam hendrerit ipsum nisi,
        vel semper dolor malesuada a. Pellentesque a scelerisque sapien, quis interdum odio. Nulla posuere, velit sit
        amet lacinia pharetra, sapien arcu convallis dolor, id congue erat lectus nec sem. Praesent pretium a nisi et
        elementum. Cras lacinia sollicitudin suscipit. Phasellus accumsan felis odio. Pellentesque habitant morbi
        tristique senectus et netus et malesuada fames ac turpis egestas.
      </Text>
    );
  }
}