### Starter Project Setup and Execution

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/tutorial.md

Clone, install dependencies, and run the React NodeGui starter project to quickly get started.

```sh
# Clone the repository
$ git clone https://github.com/nodegui/react-nodegui-starter
# Go into the repository
$ cd react-nodegui-starter
# Install dependencies
$ npm install
# Run the dev server
$ npm run dev
# Run the app on a separate terminal tab or window
$ npm start
```

--------------------------------

### Install Dependencies

Source: https://github.com/nodegui/react-nodegui/blob/master/website/README.md

Run this command to install all project dependencies.

```bash
yarn
```

--------------------------------

### Install with Custom Qt

Source: https://github.com/nodegui/react-nodegui/blob/master/README.md

Use this command to install dependencies when using a custom Qt installation directory.

```bash
QT_INSTALL_DIR=/path/to/qt npm install
```

--------------------------------

### Start Local Development Server

Source: https://github.com/nodegui/react-nodegui/blob/master/website/README.md

Starts a local development server. Changes are reflected live without server restarts.

```bash
yarn start
```

--------------------------------

### Verify Node.js and npm Installation (macOS/Linux)

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/getting-started.md

Confirm that Node.js and npm are installed and accessible in your terminal. These commands should output their respective version numbers.

```shell
# This command should print the version of Node.js
node -v

# This command should print the version of npm
npm -v
```

--------------------------------

### Basic GridView Layout Example

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/layout.md

Demonstrates how to set up a GridView with rows and columns, including dynamic addition/removal of rows and columns, and row stretching.

```jsx
import React, { useState } from "react";
import { Renderer, GridView, GridRow, GridColumn, Text, Window, View, Button, useEventHandler } from "@nodegui/react-nodegui";
import { QPushButtonSignals } from "@nodegui/nodegui";

const App = () => {
  const [additionalRows, setAdditionalRows] = useState<string[]>([]);
  const [rowStretch, setRowStretch] = useState(false);

  const [additionalColumns, setAdditionalColumns] = useState<string[]>([]);

  const insertRowHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalRows((rows) => [...rows, `Row ${rows.length}`]),
    },
    []
  );

  const removeRowHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalRows((rows) => [...rows.slice(0, rows.length - 1)]),
    },
    []
  );

  const insertColumnHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalColumns((columns) => [
          ...columns,
          `Column ${columns.length}`,
        ]),
    },
    []
  );

  const removeColumnsHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalColumns((columns) => [
          ...columns.slice(0, columns.length - 1),
        ]),
    },
    []
  );

  const toggleRowStretch = useEventHandler<QPushButtonSignals>(
    {
      clicked: () => setRowStretch((value) => !value),
    },
    []
  );

  return (
    <Window>
      <GridView
        style="flex: 1"
        columnProps={{
          0: {
            minWidth: 200,
          },
          1: {
            minWidth: 300,
          },
        }}
        rowProps={{
          0: {
            stretch: rowStretch ? 2 : undefined,
            minHeight: 400,
          },
          1: {
            stretch: !rowStretch ? 2 : undefined,
          },
        }}
      >
        <GridRow>
          <GridColumn width={2}>
            <View style="background-color: red">
              <Text>Hello</Text>
              <Button text="Insert row" on={insertRowHandler} />
              <Button text="Remove row" on={removeRowHandler} />
              <Button text="Toggle row stretch" on={toggleRowStretch} />
              <Button text="Insert column" on={insertColumnHandler} />
              <Button text="Remove column" on={removeColumnsHandler} />
            </View>
          </GridColumn>
          <GridColumn width={2}>
            <View style="background-color: blue">
              <Text>Second Column</Text>
            </View>
          </GridColumn>
          <>
            {additionalColumns.map((column) => (
              <GridColumn key={column}>
                <Text>{column}</Text>
              </GridColumn>
            ))}
          </>
        </GridRow>
        <GridRow height={2}>
          <GridColumn>
            <View style="background-color: green">
              <Text>Second row</Text>
            </View>
          </GridColumn>
          <GridColumn>
            <View style="background-color: purple">
              <Text>Second Column</Text>
            </View>
          </GridColumn>
          <GridColumn>
            <View style="background-color: purple">
              <Text>Third Column</Text>
            </View>
          </GridColumn>
          <GridColumn>
            <View style="background-color: purple">
              <Text>Fourth Column</Text>
            </View>
          </GridColumn>
          <>
            {additionalColumns.map((column) => (
              <GridColumn key={column}>
                <Text>Second {column}</Text>
              </GridColumn>
            ))}
          </>
        </GridRow>
        <GridRow>
          <GridColumn>
            <Text>Third row</Text>
          </GridColumn>
        </GridRow>
        <>
          {additionalRows.map((row) => (
            <GridRow key={row}>
              <GridColumn width={2}>
                <Text>{row}</Text>
              </GridColumn>
              <GridColumn>
                <Text>Second {row}</Text>
              </GridColumn>
            </GridRow>
          ))}
        </>
      </GridView>
    </Window>
  );
};

Renderer.render(<App />);

```

--------------------------------

### Basic Button Example

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/abstractbuttonprops.md

Demonstrates how to use the Button component with basic styling and text. Ensure necessary components like Renderer, Button, and Window are imported from '@nodegui/react-nodegui'.

```javascript
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: white;
`;
Renderer.render(<App />);

```

--------------------------------

### Implement Dynamic BoxView Layout with React

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/layout.md

This example shows how to use BoxView to arrange buttons dynamically. It includes functionality to add, remove, and toggle the layout direction of buttons within the BoxView. Ensure you have the necessary NodeGui and React dependencies installed.

```jsx
import React, { useState } from "react";
import { Renderer, Window, BoxView, Button } from "@nodegui/react-nodegui";
import { useEventHandler } from "./hooks";
import { QPushButtonSignals, Direction } from "@nodegui/nodegui";

const App = () => {
  const [additionalButtons, setAdditionalButtons] = useState<string[]>([]);
  const [direction, setDirection] = useState<Direction>(Direction.LeftToRight);

  const addHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalButtons((buttons) => [
          ...buttons,
          `Button ${buttons.length}`,
        ]),
    },
    []
  );

  const removeHandler = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setAdditionalButtons((buttons) => buttons.slice(0, buttons.length - 1)),
    },
    []
  );

  const toggleDirection = useEventHandler<QPushButtonSignals>(
    {
      clicked: () =>
        setDirection((prevDirection) => ((prevDirection + 1) % 4) as Direction),
    },
    []
  );

  return (
    <Window>
      <BoxView direction={direction}>
        <Button text="Add" on={addHandler} />
        <Button text="Remove" on={removeHandler} />
        <Button text="Toggle direction" on={toggleDirection} />
        {additionalButtons.map((button) => (
          <Button key={button} text={button} />
        ))}
      </BoxView>
    </Window>
  );
};

Renderer.render(<App />);

```

--------------------------------

### Start Qode with Inspect and Break

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/debugging.md

Use the `--inspect-brk` switch to enable debugging and pause execution on the very first line of JavaScript. This is useful for debugging startup issues.

```shell
qode --inspect-brk=9229 your/app
```

--------------------------------

### Run Debug Script

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/debugging.md

If using the official nodegui-starter boilerplate, you can run the predefined debug script to start your application in debug mode.

```shell
npm run debug
```

--------------------------------

### Basic Image Display

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/images.md

A minimal example demonstrating how to display an image using the `<Image>` component with a URL. This component internally uses QLabel and accepts props similar to the `<Text>` component.

```javascript
import React from "react";
import { Renderer, Image, Window } from "@nodegui/react-nodegui";

const App = () => {
  return (
    <Window>
      <Image src="https://docs.nodegui.org/img/logo-circle.png" />
    </Window>
  );
};

Renderer.render(<App />);
```

--------------------------------

### minimumSize

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Gets the minimum size of the menu.

```APIDOC
## minimumSize

### Description
Gets the minimum size of the menu.

### Returns
- QSize
```

--------------------------------

### pos

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Gets the current position of the menu.

```APIDOC
## pos

### Description
Gets the current position of the menu.

### Returns
- object
  - **x**: number
  - **y**: number
```

--------------------------------

### Start Qode with Inspect

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/debugging.md

Use the `--inspect` switch to enable the V8 inspector protocol on a specified port. Qode will listen for debugger connections on this port. The default port is 9229.

```shell
qode --inspect=9229 your/app
```

--------------------------------

### Python Syntax Highlighting

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/doc1.md

Example of Python code block with syntax highlighting. Used for demonstrating code rendering.

```python
s = "Python syntax highlighting"
print s

```

--------------------------------

### VSCode Debugger Configuration

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/debugging-in-vscode.md

Configure the `.vscode/launch.json` file to enable debugging of Qode processes within VSCode. This setup specifies the runtime executable and arguments for the debugger.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Qode Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/qode.exe"
      },
      "args": ["./dist/index.js"],
      "outputCapture": "std"
    }
  ]
}
```

--------------------------------

### minimumSize

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the minimum size of the menu bar. Inherited from void.

```APIDOC
## minimumSize

### Description
Gets the minimum allowable size for the menu bar.

### Returns
*QSize*

```

--------------------------------

### JavaScript Syntax Highlighting

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/doc1.md

Example of JavaScript code block with syntax highlighting. Used for demonstrating code rendering.

```javascript
var s = 'JavaScript syntax highlighting';
alert(s);

```

--------------------------------

### FlexLayout Example: Distributing Space

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/layout.md

Demonstrates using `flex` property to distribute available space between child components. The `flex` value determines the ratio of space each component occupies relative to its siblings.

```javascript
import React from "react";
import { Renderer, View, Text, Window } from "@nodegui/react-nodegui";

const App = () => {
  return (
    <Window styleSheet={styleSheet}>
      <View id="rootView">
        <Text id="label">Hello</Text>
        <View id="view" />
      </View>
    </Window>
  );
};

const styleSheet = `
  #rootView{
    height: '100%';
    background-color: blue;
  }
  #label {
    flex: 1;
    color: white;
    background-color: green;
  }
  #view {
    flex: 3;
    background-color: white;
  }
`;

Renderer.render(<App />);
```

--------------------------------

### Fetch Data with Node Fetch

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/networking.md

Use node-fetch to make GET requests and parse JSON responses. Ensure the node-fetch module is installed.

```javascript
const fetch = require("node-fetch");
async function getData() {
  try {
    let response = await fetch("https://somewebsite.com/some.json");
    let responseJson = await response.json();
    return responseJson.somecontent;
  } catch (error) {
    console.error(error);
  }
}
```

--------------------------------

### Build React NodeGUI

Source: https://github.com/nodegui/react-nodegui/blob/master/README.md

Run this command to build the project.

```bash
npm run build
```

--------------------------------

### objectName

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Gets the object name of the menu.

```APIDOC
## objectName

### Description
Gets the object name of the menu.

### Returns
- string
```

--------------------------------

### Creating and Rendering a Basic Window

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/tutorial.md

Use the Window component from '@nodegui/react-nodegui' to create a native window and render it using Renderer.render.

```javascript
const { Window, Renderer } = require("@nodegui/react-nodegui");

const App = () => {
  return <Window></Window>;
};

Renderer.render(<App />);
```

--------------------------------

### Clone and Open NodeGui Project

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/debugging-in-vscode.md

Clone the react-nodegui starter project and open it in VSCode to begin debugging.

```sh
$ git clone git@github.com:nodegui/react-nodegui-starter.git
$ code react-nodegui-starter
```

--------------------------------

### maximumSize

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Gets the maximum size of the menu.

```APIDOC
## maximumSize

### Description
Gets the maximum size of the menu.

### Returns
- QSize
```

--------------------------------

### Basic React NodeGui Project Structure

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/tutorial.md

A minimal React NodeGui application requires a package.json file and an entry point like index.js.

```text
your-app/
├── package.json
├── index.js
```

--------------------------------

### objectName

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the object name of the menu bar.

```APIDOC
## objectName

### Description

Gets the object name of the menu bar. This method is inherited from RNAction.

### Method

objectName

### Returns

* string - The object name of the menu bar.
```

--------------------------------

### Initialize NodeGui Packer

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/packaging.md

Run this command once to initialize the deploy directory with a template for your application. You can then customize this template with icons, names, and other native features.

```bash
npx nodegui-packer --init MyAppName
```

--------------------------------

### property

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Gets a specific property of the menu by name.

```APIDOC
## property

### Description
Gets a specific property of the menu by name.

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the property to retrieve.

### Returns
- QVariant
```

--------------------------------

### property

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets a specific property of the menu bar by name.

```APIDOC
## property

### Description

Gets a specific property of the menu bar by name. This method is inherited from RNAction.

### Method

property

### Parameters

#### Path Parameters

- **name** (string) - Required - The name of the property to retrieve.

### Returns

* QVariant - The value of the specified property.
```

--------------------------------

### show

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Makes the menu bar window visible.

```APIDOC
## show

### Description
Shows the menu bar window.

### Method
show
```

--------------------------------

### geometry

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the geometry of the menu bar. Inherited from void.

```APIDOC
## geometry

### Description
Gets the geometry (position and size) of the menu bar.

### Returns
*QRect*

```

--------------------------------

### font

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the font of the menu bar. Inherited from void.

```APIDOC
## font

### Description
Gets the font used by the menu bar.

### Returns
*QFont*

```

--------------------------------

### Build Static Content

Source: https://github.com/nodegui/react-nodegui/blob/master/website/README.md

Generates static content for hosting on any static content service.

```bash
yarn build
```

--------------------------------

### show

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Makes the window visible.

```APIDOC
## show

### Description
Makes the window visible.

### Method
(Implicitly a method call on an RNMenu instance)

### Parameters
None

### Request Example
```javascript
// Assuming 'menuInstance' is an instance of RNMenu
menuInstance.show();
```

### Response
#### Success Response
* void - This method does not return a value.

#### Response Example
```json
// No response body for void return type
```
```

--------------------------------

### maximumSize

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the maximum size of the menu bar. Inherited from void.

```APIDOC
## maximumSize

### Description
Gets the maximum allowable size for the menu bar.

### Returns
*QSize*

```

--------------------------------

### get

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/_react_proxy_.reactproxycomponent.md

Retrieves the current React component type managed by ReactProxyComponent.

```APIDOC
## get

### Description
Retrieves the current React component type.

### Method
None (This is a method call on an object, not an HTTP endpoint)

### Parameters
None

### Returns
* React.ComponentType - The current component type.
```

--------------------------------

### Basic Button Usage

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/buttonprops.md

Demonstrates how to render a simple button with text and basic styling. This snippet shows the fundamental way to integrate a Button component within a NodeGui application.

```javascript
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: white;
`;
Renderer.render(<App />);
```

--------------------------------

### getFlexNode

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Gets the flex node associated with the menu bar. Inherited from void.

```APIDOC
## getFlexNode

### Description
Retrieves the flex node for layout management.

### Returns
*FlexNode*

```

--------------------------------

### raise

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Raises the menu.

```APIDOC
## raise

### Description
Raises the menu.

### Returns
- void
```

--------------------------------

### Setting Widget Ref

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/scrollareaprops.md

The 'ref' prop allows you to get a reference to the underlying NodeGui widget instance.

```typescript
import { View } from '@nodegui/react-nodegui';
import { useRef } from 'react';

// ...

const myViewRef = useRef<any>(null);

// ...

<View ref={myViewRef} />
```

--------------------------------

### Pack Application with @nodegui/packer

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/packaging.md

This command builds the final distributable using your template and the packed assets from the ./dist directory. The output will be located in the build directory, which should be gitignored.

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

--------------------------------

### onInit

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/globals.md

Lifecycle method called when the component is initialized.

```APIDOC
### onInit

▸ **onInit**(): *void*

**Returns:** *void*

Lifecycle method called when the component is initialized.
```

--------------------------------

### Deploy Updated Docs

Source: https://github.com/nodegui/react-nodegui/blob/master/README.md

Follow-up commands to deploy updated documentation, specifying your GitHub username.

```bash
cd website &&  GIT_USER=<your_git_username> yarn deploy
```

--------------------------------

### Setting Widget Attributes

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/dialprops.md

Use the 'attributes' prop to set widget-specific attributes. This example shows how to disable the widget.

```typescript
attributes={{ [WidgetAttributes.WA_Disabled]: true }}
```

--------------------------------

### showFullScreen

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Displays the menu bar window in full-screen mode.

```APIDOC
## showFullScreen

### Description
Shows the menu bar window in full-screen mode.

### Method
showFullScreen
```

--------------------------------

### Setting Event Listeners

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/dialprops.md

Use the 'on' prop to attach event listeners to the widget. Refer to the 'Handling Events' guide for more details.

```typescript
on={{ click: () => console.log('Dial clicked') }}
```

--------------------------------

### Basic View Component Usage

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/viewprops.md

Demonstrates how to use the View component to structure child components like Buttons within a Window. Ensure necessary components are imported.

```javascript
import React from "react";
import { Renderer, Button, Window, View } from "./index";
const App = () => {
 return (
   <Window>
     <View>
       <Button style={buttonStyle} text={\"Hello\"} />
       <Button style={buttonStyle} text={\"World\"} />
     </View>
   </Window>
 );
};
const buttonStyle = `
 color: white;
`;
Renderer.render(<App />);
```

--------------------------------

### Deploy to GitHub Pages

Source: https://github.com/nodegui/react-nodegui/blob/master/website/README.md

Builds the website and pushes it to the gh-pages branch for GitHub Pages hosting.

```bash
GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
```

--------------------------------

### Plain Text Code Block

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/doc1.md

Example of a code block without specified language, resulting in no syntax highlighting. Can include HTML tags.

```plaintext
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.

```

--------------------------------

### defaultOptions

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/globals.md

Provides default configuration options for React Nodegui.

```APIDOC
## Object literals

### `Const` defaultOptions

### ▪ **defaultOptions**: *object*

Provides default configuration options for React Nodegui.
```

--------------------------------

### Append Initial Child to RNMenu

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Demonstrates appending an initial child component to an RNMenu. This is typically used during the component's initial setup.

```javascript
const menu = new RNMenu();
const initialChild = new Component(); // Assuming Component is a valid type
menu.appendInitialChild(initialChild);
```

--------------------------------

### Add System Tray Icon with Menu

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/systemtrayiconprops.md

This snippet demonstrates how to add a system tray icon with a custom icon, tooltip, and a context menu action. It requires importing necessary components from React NodeGui and setting up a QIcon and QAction.

```javascript
import React from "react";
import { QIcon, QAction } from "@nodegui/nodegui";
import { Menu, Renderer, SystemTrayIcon, Window } from "@nodegui/react-nodegui";
import path from "path";

const icon = new QIcon(path.join(__dirname, "../extras/assets/nodegui.png"));
const action = new QAction();
action.setText("Hello");
action.addEventListener("triggered", () => {
  console.log("hello");
});

const App = () => {
  return (
    <Window>
      <SystemTrayIcon icon={icon} tooltip="Hello World" visible>
        <Menu actions={[action]} />
      </SystemTrayIcon>
    </Window>
  );
};

Renderer.render(<App />);

```

--------------------------------

### Styling with Pseudo-States

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/guides/styling.md

Apply styles based on component states using pseudo-states, similar to web CSS. For example, change the text color when a button is hovered.

```css
#okButton:hover {
  color: red;
}
```

--------------------------------

### activateWindow

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Activates the menu bar's window. Inherited from void.

```APIDOC
## activateWindow

### Description
Activates the menu bar's window.

### Returns
*void*

```

--------------------------------

### raise

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Raises the menu bar to the top of the stacking order.

```APIDOC
## raise

### Description

Raises the menu bar to the top of the stacking order.

### Method

raise

### Returns

* void
```

--------------------------------

### showMaximized

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Displays the menu bar window in a maximized state.

```APIDOC
## showMaximized

### Description
Shows the menu bar window in a maximized state.

### Method
showMaximized
```

--------------------------------

### showFullScreen

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Displays the window in full-screen mode.

```APIDOC
## showFullScreen

### Description
Displays the window in full-screen mode.

### Method
(Implicitly a method call on an RNMenu instance)

### Parameters
None

### Request Example
```javascript
// Assuming 'menuInstance' is an instance of RNMenu
menuInstance.showFullScreen();
```

### Response
#### Success Response
* void - This method does not return a value.

#### Response Example
```json
// No response body for void return type
```
```

--------------------------------

### RNMenu Methods

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Reference for all methods available on RNMenu instances.

```APIDOC
## acceptDrops

### Description
Checks if the widget accepts drops.

### Signature
acceptDrops(): boolean
```

```APIDOC
## activateWindow

### Description
Activates the window associated with the widget.

### Signature
activateWindow()
```

```APIDOC
## addAction

### Description
Adds an action to the menu.

### Signature
addAction(action: QAction): QAction
```

```APIDOC
## addEventListener

### Description
Adds an event listener to the widget.

### Signature
addEventListener(event: string, listener: Function)
```

```APIDOC
## addSeparator

### Description
Adds a separator to the menu.

### Signature
addSeparator(): QAction
```

```APIDOC
## adjustSize

### Description
Adjusts the size of the widget to fit its contents.

### Signature
adjustSize()
```

```APIDOC
## appendChild

### Description
Appends a child widget to the current widget.

### Signature
appendChild(child: NodeWidget): NodeWidget
```

```APIDOC
## appendInitialChild

### Description
Appends an initial child widget.

### Signature
appendInitialChild(child: NodeWidget): NodeWidget
```

```APIDOC
## close

### Description
Closes the menu.

### Signature
close()
```

```APIDOC
## exec

### Description
Executes the menu, making it visible and interactive.

### Signature
exec(pos?: Point): string | number
```

```APIDOC
## font

### Description
Gets the font of the widget.

### Signature
font(): QFont
```

```APIDOC
## geometry

### Description
Gets the geometry (position and size) of the widget.

### Signature
geometry(): QRect
```

```APIDOC
## getFlexNode

### Description
Retrieves the flex node associated with the widget.

### Signature
getFlexNode(): FlexNode
```

```APIDOC
## hasMouseTracking

### Description
Checks if mouse tracking is enabled for the widget.

### Signature
hasMouseTracking(): boolean
```

```APIDOC
## hide

### Description
Hides the widget.

### Signature
hide()
```

```APIDOC
## inherits

### Description
Checks if the widget inherits from a specific class.

### Signature
inherits(className: string): boolean
```

```APIDOC
## insertBefore

### Description
Inserts a widget before another widget in the children list.

### Signature
insertBefore(child: NodeWidget, before: NodeWidget): NodeWidget
```

```APIDOC
## isEnabled

### Description
Checks if the widget is enabled.

### Signature
isEnabled(): boolean
```

```APIDOC
## isVisible

### Description
Checks if the widget is visible.

### Signature
isVisible(): boolean
```

```APIDOC
## lower

### Description
Lowers the widget in the stacking order.

### Signature
lower()
```

```APIDOC
## mapFromGlobal

### Description
Maps a global point to the widget's local coordinate system.

### Signature
mapFromGlobal(point: Point): Point
```

```APIDOC
## mapFromParent

### Description
Maps a parent's local point to the widget's local coordinate system.

### Signature
mapFromParent(point: Point): Point
```

```APIDOC
## mapToGlobal

### Description
Maps a local point to the global coordinate system.

### Signature
mapToGlobal(point: Point): Point
```

```APIDOC
## mapToParent

### Description
Maps a local point to the parent's local coordinate system.

### Signature
mapToParent(point: Point): Point
```

```APIDOC
## maximumSize

### Description
Gets the maximum size of the widget.

### Signature
maximumSize(): Size
```

```APIDOC
## minimumSize

### Description
Gets the minimum size of the widget.

### Signature
minimumSize(): Size
```

```APIDOC
## move

### Description
Moves the widget to a new position.

### Signature
move(x: number, y: number)
```

```APIDOC
## objectName

### Description
Gets the object name of the widget.

### Signature
objectName(): string
```

```APIDOC
## popup

### Description
Shows the menu as a popup.

### Signature
popup(pos?: Point)
```

```APIDOC
## pos

### Description
Gets the position of the widget.

### Signature
pos(): Point
```

```APIDOC
## property

### Description
Gets a dynamic property of the widget.

### Signature
property(name: string): any
```

```APIDOC
## raise

### Description
Raises the widget in the stacking order.

### Signature
raise()
```

```APIDOC
## removeAction

### Description
Removes an action from the menu.

### Signature
removeAction(action: QAction)
```

```APIDOC
## removeChild

### Description
Removes a child widget from the current widget.

### Signature
removeChild(child: NodeWidget): NodeWidget
```

```APIDOC
## removeEventListener

### Description
Removes an event listener from the widget.

### Signature
removeEventListener(event: string, listener: Function)
```

```APIDOC
## repaint

### Description
Triggers a repaint of the widget.

### Signature
repaint()
```

```APIDOC
## repolish

### Description
Triggers a re-polish of the widget's style.

### Signature
repolish()
```

```APIDOC
## resize

### Description
Resizes the widget to the specified width and height.

### Signature
resize(width: number, height: number)
```

```APIDOC
## setAcceptDrops

### Description
Sets whether the widget accepts drops.

### Signature
setAcceptDrops(on: boolean)
```

```APIDOC
## setAttribute

### Description
Sets a widget attribute.

### Signature
setAttribute(attribute: string, value: any)
```

```APIDOC
## setContextMenuPolicy

### Description
Sets the context menu policy for the widget.

### Signature
setContextMenuPolicy(policy: ContextMenuPolicy)
```

```APIDOC
## setCursor

### Description
Sets the cursor for the widget.

### Signature
setCursor(cursor: QCursor)
```

```APIDOC
## setEnabled

### Description
Enables or disables the widget.

### Signature
setEnabled(enabled: boolean)
```

```APIDOC
## setFixedSize

### Description
Sets a fixed size for the widget.

### Signature
setFixedSize(width: number, height: number)
```

```APIDOC
## setFlexNodeSizeControlled

### Description
Controls the size of the widget via its flex node.

### Signature
setFlexNodeSizeControlled(isControlled: boolean)
```

```APIDOC
## setFocus

### Description
Sets the focus policy for the widget.

### Signature
setFocus(policy: FocusPolicy)
```

```APIDOC
## setFont

### Description
Sets the font for the widget.

### Signature
setFont(font: QFont)
```

```APIDOC
## setGeometry

### Description
Sets the geometry (position and size) of the widget.

### Signature
setGeometry(x: number, y: number, width: number, height: number)
```

```APIDOC
## setGraphicsEffect

### Description
Applies a graphics effect to the widget.

### Signature
setGraphicsEffect(effect: QGraphicsEffect)
```

```APIDOC
## setInlineStyle

### Description
Applies inline styles to the widget.

### Signature
setInlineStyle(style: string)
```

```APIDOC
## setLayout

### Description
Sets the layout for the widget.

### Signature
setLayout(layout: QLayout)
```

```APIDOC
## setMaximumSize

### Description
Sets the maximum size of the widget.

### Signature
setMaximumSize(width: number, height: number)
```

```APIDOC
## setMinimumSize

### Description
Sets the minimum size of the widget.

### Signature
setMinimumSize(width: number, height: number)
```

```APIDOC
## setMouseTracking

### Description
Enables or disables mouse tracking for the widget.

### Signature
setMouseTracking(enable: boolean)
```

```APIDOC
## setNodeParent

### Description
Sets the parent node of the widget.

### Signature
setNodeParent(parent: NodeWidget)
```

```APIDOC
## setObjectName

### Description
Sets the object name of the widget.

### Signature
setObjectName(name: string)
```

```APIDOC
## setProperty

### Description
Sets a dynamic property of the widget.

### Signature
setProperty(name: string, value: any)
```

```APIDOC
## setProps

### Description
Sets multiple properties on the widget.

### Signature
setProps(props: object)
```

```APIDOC
## setStyleSheet

### Description
Applies a stylesheet to the widget.

### Signature
setStyleSheet(sheet: string)
```

```APIDOC
## setTitle

### Description
Sets the title of the widget.

### Signature
setTitle(title: string)
```

```APIDOC
## setWindowFlag

### Description
Sets a window flag for the widget.

### Signature
setWindowFlag(flag: string, value: boolean)
```

```APIDOC
## setWindowIcon

### Description
Sets the window icon for the widget.

### Signature
setWindowIcon(icon: QIcon)
```

```APIDOC
## setWindowOpacity

### Description
Sets the window opacity.

### Signature
setWindowOpacity(opacity: number)
```

```APIDOC
## setWindowState

### Description
Sets the window state.

### Signature
setWindowState(state: WindowState)
```

```APIDOC
## setWindowTitle

### Description
Sets the window title.

### Signature
setWindowTitle(title: string)
```

```APIDOC
## show

### Description
Shows the widget.

### Signature
show()
```

```APIDOC
## showFullScreen

### Description
Shows the widget in full-screen mode.

### Signature
showFullScreen()
```

```APIDOC
## showMaximized

### Description
Shows the widget maximized.

### Signature
showMaximized()
```

```APIDOC
## showMinimized

### Description
Shows the widget minimized.

### Signature
showMinimized()
```

```APIDOC
## showNormal

### Description
Shows the widget in its normal state.

### Signature
showNormal()
```

```APIDOC
## size

### Description
Gets the size of the widget.

### Signature
size(): Size
```

```APIDOC
## styleSheet

### Description
Gets the stylesheet applied to the widget.

### Signature
styleSheet(): string
```

```APIDOC
## testAttribute

### Description
Tests if a widget attribute is set.

### Signature
testAttribute(attribute: string): boolean
```

```APIDOC
## update

### Description
Schedules a repaint of the widget.

### Signature
update()
```

```APIDOC
## updateGeometry

### Description
Updates the widget's geometry.

### Signature
updateGeometry()
```

```APIDOC
## windowOpacity

### Description
Gets the window opacity.

### Signature
windowOpacity(): number
```

```APIDOC
## windowState

### Description
Gets the current window state.

### Signature
windowState(): WindowState
```

```APIDOC
## windowTitle

### Description
Gets the window title.

### Signature
windowTitle(): string
```

--------------------------------

### updateDisplacedChildren

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/globals.md

Updates displaced children in a list, typically used for virtualized lists or dynamic layouts. It requires start index, items, parent, size key, and a function key to set parent properties.

```APIDOC
## `updateDisplacedChildren`

▸ **updateDisplacedChildren**‹**TItem**, **TParent**›(`startIndex`: number, `items`: Array‹[DataWithOffset](interfaces/datawithoffset.md)‹[OnlyType](globals.md#onlytype)‹TItem, number› & [Allowed](globals.md#allowed)‹TItem, TParent››, `parent`: TParent, `sizeKey`: keyof OnlyType<TItem, number>, `setParentFuncKey`: keyof Allowed<TItem, TParent>): *void*

**Type parameters:**

▪ **TItem**

▪ **TParent**

**Parameters:**

Name | Type |
------ | ------ |
`startIndex` | number |
`items` | Array‹[DataWithOffset](interfaces/datawithoffset.md)‹[OnlyType](globals.md#onlytype)‹TItem, number› & [Allowed](globals.md#allowed)‹TItem, TParent››› |
`parent` | TParent |
`sizeKey` | keyof OnlyType<TItem, number> |
`setParentFuncKey` | keyof Allowed<TItem, TParent> |

**Returns:** *void*
```

--------------------------------

### Update React NodeGUI Docs

Source: https://github.com/nodegui/react-nodegui/blob/master/README.md

Command to update the project's documentation.

```bash
npm run docs
```

--------------------------------

### popup

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Shows the context menu at a specified point, optionally with a specific action.

```APIDOC
## popup

### Description
Shows the context menu at a specified point, optionally with a specific action.

### Parameters
#### Path Parameters
- **point** (QPoint) - Required - The point at which to show the menu.
- **action** (QAction) - Optional - The specific action to highlight or trigger.

### Returns
- void
```

--------------------------------

### showMinimized

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenubar.md

Displays the menu bar window in a minimized state.

```APIDOC
## showMinimized

### Description
Shows the menu bar window in a minimized state.

### Method
showMinimized
```

--------------------------------

### render

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/renderer.md

Renders a React element into the NodeGui environment. It accepts the element to render and optional rendering options.

```APIDOC
## render

### Description
Renders a React element into the NodeGui environment.

### Method
static

### Parameters
#### Parameters
- **element** (React.ReactNode) - Required - The React element to render.
- **options?** (RendererOptions) - Optional - Options for the renderer.
```

--------------------------------

### Basic CheckBox Usage

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/interfaces/checkboxprops.md

Demonstrates how to render a basic CheckBox component with text and an initial checked state. This snippet requires React and NodeGui imports.

```javascript
import React from "react";
import { Renderer, CheckBox, Window } from "@nodegui/react-nodegui";
const App = () => {
  return (
    <Window>
      <CheckBox style={checkboxStyle} text={\"Hello World\"} checked={true} />
    </Window>
  );
};
const checkboxStyle = `
  color: white;
`;
Renderer.render(<App />);

```

--------------------------------

### RendererOptions

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/globals.md

Options for configuring the renderer, including initialization and render callbacks.

```APIDOC
## RendererOptions

### Description
Configuration options for the renderer, including callbacks for initialization and rendering.

### Type Declaration
```typescript
{
  onInit?: () => void | undefined;
  onRender?: () => void | undefined;
}
```
```

--------------------------------

### showMaximized

Source: https://github.com/nodegui/react-nodegui/blob/master/website/docs/api/classes/rnmenu.md

Displays the window in a maximized state.

```APIDOC
## showMaximized

### Description
Displays the window in a maximized state.

### Method
(Implicitly a method call on an RNMenu instance)

### Parameters
None

### Request Example
```javascript
// Assuming 'menuInstance' is an instance of RNMenu
menuInstance.showMaximized();
```

### Response
#### Success Response
* void - This method does not return a value.

#### Response Example
```json
// No response body for void return type
```
```