NodeGUI React Component by Component
Tags: nodegui, react, desktop
Published: 2020-09-19 03:05:25

---
title: NodeGUI React Component by Component 
published: true
description: an overview of NodeGUI React Component by Component
tags: nodegui, react, desktop
canonical_url: https://gregbenner.life/node-gui-react-component-by-component/
cover_image: https://gregbenner.life/assets/static/alexandr-podvalny-220262-unsplash.07cc2b7.490343832c4705701e26598c1c374606.jpg
---

# 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](https://github.com/nodegui/react-nodegui/pull/279) and [here](https://github.com/nodegui/react-nodegui/pull/278) thus far. I also got involved with the [Vue](https://github.com/nodegui/vue-nodegui) 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](https://react.nodegui.org/docs/api/interfaces/buttonprops) 

```js
    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 />);
```

![and Voila a button in an empty window with a flex layout](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600481202559_Screenshot+from+2020-09-18+22-06-20.png)



----------


## Checkbox

this is the system or OS (Ubuntu) default [checkbox](https://react.nodegui.org/docs/api/interfaces/checkboxprops) 

```js
    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 />);
 ```   
![checkbox](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600481421568_Screenshot+from+2020-09-18+22-08-06.png)



----------


## Dial

this is the system or OS (Ubuntu) default [dial](https://react.nodegui.org/docs/api/interfaces/dialprops) 

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

![dial](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600481567533_Screenshot+from+2020-09-18+22-12-35.png)



----------


## Image

this is [image](https://react.nodegui.org/docs/api/interfaces/imageprops) component, ensure you use the AspectRatioMode to render the image correctly

```js
    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 />);
```

![image component](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600484260145_Screenshot+from+2020-09-18+22-57-18.png)

----------


# LineEdit

this is the system or OS (Ubuntu) default [text input](https://react.nodegui.org/docs/api/interfaces/lineeditprops) field

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

![Single line text input](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600482251675_Screenshot+from+2020-09-18+22-23-53.png)



----------


# PlainTextEdit

this is the system or OS (Ubuntu) default [text area](https://react.nodegui.org/docs/api/interfaces/plaintexteditprops) input field, notices it automatically gets a scrollbar for overflowing text.

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

![](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600482423915_Screenshot+from+2020-09-18+22-26-49.png)



----------


# ProgressBar

this is the system or OS (Ubuntu) default system [progress bar](https://react.nodegui.org/docs/api/interfaces/progressbarprops).

![](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600482570623_Screenshot+from+2020-09-18+22-29-18.png)

```js
    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](https://react.nodegui.org/docs/api/interfaces/radiobuttonprops).

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

![radio button](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600482786930_Screenshot+from+2020-09-18+22-32-52.png)



----------


# ScrollArea

A [scrollable](https://react.nodegui.org/docs/api/interfaces/scrollareaprops) area

```js
    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](https://react.nodegui.org/docs/api/interfaces/spinboxprops) field

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

![number input aka spinbox](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600483087967_Screenshot+from+2020-09-18+22-37-56.png)


----------


# Text

this is the system or OS (Ubuntu) [default text](https://react.nodegui.org/docs/api/interfaces/textprops). 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.

```js
    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 />);
```

![](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600483283571_Screenshot+from+2020-09-18+22-39-41.png)



----------


# View

This is an invisible [layout element](https://react.nodegui.org/docs/api/interfaces/viewprops) in web terms it’s a div, in mobile dev terms it’s a view. 

```js
    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](https://react.nodegui.org/docs/api/interfaces/windowprops). 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.

```js
    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 />);
```

![](https://paper-attachments.dropbox.com/s_F51137A5BEE0D0C1849587210ABB9029F64364DC2BB6069BC2FCAB6617A0AC1E_1600483836038_Screenshot+from+2020-09-18+22-50-20.png)



----------

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](https://github.com/gregbenner/-vanillajs-react-mobx-nodegui-starter-) 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](https://github.com/nodegui/nodegui-starter#packaging-app-as-a-distributable) and that’s the fun part.


## Packaging app as a distributable

In order to distribute your finished app, you can use [@nodegui/packer](https://github.com/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`