NodeGUI React Component by Component

I was going to name this piece by piece or the building blocks of, but I want that sweet, sweet SEO. In my last post I kind of brushed on NodeGUI and one of the negatives I listed was it was a bit light on examples so I since decided to remedy that by contributing to the project here and here thus far. I also got involved with the Vue version of NodeGUI, it’s not as polished or production ready as the react one yet but I hope to help with that.

This post I want to go through and demo most of the base components of NodeGUI React. I’m planning on doing one more post after taking you through how I build a non trivial app with it.

Button

this is the system or OS (Ubuntu) default button

    import React from "react";
    import { Renderer, Button, Window } from "@nodegui/react-nodegui";
    const App = () => {
    return (
    <Window>
    <Button style={buttonStyle} text={"Hello World"} />
    </Window>
    );
    };
    const buttonStyle = `
    color: blue;
    `;
    Renderer.render(<App />);

Checkbox

this is the system or OS (Ubuntu) default checkbox

    import React from "react";
    import { Renderer, CheckBox, Window } from "@nodegui/react-nodegui";
    const App = () => {
    return (
    <Window>
    <CheckBox text={"Hello World"} checked={true} />
    </Window>
    );
    };
    Renderer.render(<App />);

Dial

this is the system or OS (Ubuntu) default dial

    import React from "react";
    import { Renderer, Dial, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <Dial />
        </Window>
      );
    };
    Renderer.render(<App />);

Image

this is image component, ensure you use the AspectRatioMode to render the image correctly

    import React from "react";
    import { Renderer, Image, Window } from "@nodegui/react-nodegui";
    import { AspectRatioMode } from "@nodegui/nodegui";
    const App = () => {
      return (
        <Window>
          <Image
            aspectRatioMode={AspectRatioMode.KeepAspectRatio}
            size={
 height: 200, width: 150 
            }
            src="https://place-hold.it/200x150"
          ></Image>
        </Window>
      );
    };
    Renderer.render(<App />);

LineEdit

this is the system or OS (Ubuntu) default text input field

    import React from "react";
    import { Renderer, LineEdit, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <LineEdit />
        </Window>
      );
    };
    Renderer.render(<App />);

PlainTextEdit

this is the system or OS (Ubuntu) default text area input field, notices it automatically gets a scrollbar for overflowing text.

    import React from "react";
    import { Renderer, PlainText, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <PlainText />
        </Window>
      );
    };
    Renderer.render(<App />);

ProgressBar

this is the system or OS (Ubuntu) default system progress bar.

    import React from "react";
    import { Renderer, ProgressBar, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <ProgressBar value={45} />
        </Window>
      );
    };
    Renderer.render(<App />);

RadioButton

this is the system or OS (Ubuntu) default system radio button.

    import React from "react";
    import { Renderer, RadioButton, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <RadioButton  />
        </Window>
      );
    };
    Renderer.render(<App />);

ScrollArea

A scrollable area

    import React from "react";
    import { Renderer, ScrollArea, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <ScrollArea  />
        </Window>
      );
    };
    Renderer.render(<App />);

SpinBox

A number input field

    import React from "react";
    import { Renderer, SpinBox, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <SpinBox  />
        </Window>
      );
    };
    Renderer.render(<App />);

Text

this is the system or OS (Ubuntu) default text. By default you will have access to system installed fonts. It is possible to use custom fonts such as google fonts but it’s out of scope for now.

    import React from "react";
    import { Renderer, Text, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <Text>Welcome to NodeGui</Text>
        </Window>
      );
    };
    Renderer.render(<App />);

View

This is an invisible layout element in web terms it’s a div, in mobile dev terms it’s a view.

    import React from "react";
    import { Renderer, View, Window } from "@nodegui/react-nodegui";
    const App = () => {
      return (
        <Window>
          <View>
            <Text>Welcome to NodeGui<Text>
          </View>
        </Window>
      );
    };
    Renderer.render(<App />);

Window

this is the system or OS (Ubuntu) application window. This is your main element, you can have multiple windows, and by default if all windows are closed the application will quit. You can override this behavior. I’ve included some extras here such as adding a dock icon, and responding to events, many other components can respond to events in a similar fashion.

    import React from "react";
    import { Renderer, Window } from "@nodegui/react-nodegui";
    import { QIcon } from "@nodegui/nodegui";
    import nodeguiIcon from "../assets/nodegui.jpg";
    const winIcon = new QIcon(nodeguiIcon);
    const windowHandler = {
      Close: () => {
        console.log("is closed");
      },
      WindowDeactivate: () => {
        console.log("out of focus");
      },
    };
    const styleSheet = `
    #window {
        background: #c7dae0;
      }
    `
    const App = () => {
      return (
        <Window
          styleSheet={styleSheet}
          windowIcon={winIcon}
          windowTitle={'Hello there'}
          minSize={
             width: 500, height: 300
            }
          on={windowHandler}
          id="window"
          visible={true}
        >
        </Window>
      );
    };
    Renderer.render(<App />);

That’s it for the basic components, next post will cover an interesting one called SystemTrayIcon.

If you’re like me and a bit slow to pickup TypeScript or just prefer vanilla.js I have a simple starter repo here I threw in Mobx for easy state management since setState can be difficult with NodeGUI.

Last thing is I’ll provide the build and package steps here since they are a bit hard to find and that’s the fun part.

Packaging app as a distributable

In order to distribute your finished app, you can use @nodegui/packer
Step 1: (Run this command only once)

npx nodegui-packer --init MyAppName

This will produce the deploy directory containing the template. You can modify this to suite your needs. Like add icons, change the name, description and add other native features or dependencies. Make sure you commit this directory.
Step 2: (Run this command every time you want to build a new distributable)
Next you can run the pack command:

`npm run build`

This will produce the js bundle along with assets inside the ./dist directory

`npx nodegui-packer --pack ./dist`