@bizhermit/nextron/README.md

nextjs + electron application

# Nextron

Give to Electron and Next.js framework.

---

## Usage

please use starter kit: [@bizhermit/starter](https://www.npmjs.com/package/@bizhermit/starter)  

### Install

```bash
npm i @bizhermit/nextron
```

### Example

```ts
// ./src-nextron/index.ts

import execute from "@bizhermit/nextron";

execute({/* props */});
```

### Props

execute arg (struct object) parameters.  

- **rootDirname?: string**
  nextjs root directory.  
  default: `"./src"`  
- **menubar?: boolean**
  display menubar.  
  default: `false`  
- **openDevTools?: boolean**
  open development tool window.
  default: `false`  
- **dev?: Struct**
  effect and overwrite when develop mode.  
  - **port?: number**
    port number.  
    default: `8000`  
  - **menubar?: boolean**
    display menubar when dev mode.  
    default: `true`
  - **openDevTools?: boolean**
    open development tool window.  
    default: `true`  
- **width?: number**
  window width (pt).  
  default: `1280`
- **height?: number**
  window height (pt).  
  default: `720`
- **minWidth?: number**
  window min-width (pt).  
  default: `undefined`  
- **minHeight?: number**
  window min-height (pt).  
  default: `undefined`
- **maxWidth?: number**
  window max-width (pt).  
  default: `undefined`
- **maxHeight?: number**
  window max-height (pt).  
  default: `undefined`
- **resizable?: boolean**
  allow window resize.  
  default: `true`
- **useContentSize?: boolean**
  height and width is content (exclude header and menubar) size or window size.  
  default: `false` (window)
- **fullscreen?: boolean**
  boot fullscreen mode.  
  default: `false`
- **fullscreenable?: boolean**
  allow fullscreen mode.  
  default: `true`
- **minimizable?: boolean**
  allow minimize and show button at header.  
  default: `true`
- **maximizable?: boolean**
  allow maximize and show button at header.  
  default: `true`
- **closable?: boolean**
  show close button at header.  
  default: `true`
- **position?: { x: number; y: number; } | "center" | "left-top" | "right-bottom"**
  first window position for monitor.  
  default: `"center"`
- **movable?: boolean**
  allow move window.  
  default: `true`
- **opacity?: number**
  window opacity. 0 is invisible.  
  default: `1`  
- **focusable?: boolean**
  allow focus at window. if false, cannot control.  
  default: `true`
- **alwaysOnTop?: boolean**
  window is indicated just before the constancy.  
  default: `false`
- **skipTaskbar?: boolean**
  an icon is shown to a taskbar at the time of an application icon start.  
  default: `false`
- **title?: string**
  header title.  
  default: `""`
- **frame?: boolean**
  show frame. if false, close and min/max button, title is not display.  
  default: `true`
- **hasShadow?: boolean**
  show window shadow.  
  default: `true`
- **layoutColor?: string（"light" | "dark"）**
  layout color.
  default: `undefined` (depend on a theme of os)
- **layoutDesign?: string**
  layout design.
  default: `"material"`
- **defaultConfig?: Config**
  config file initialize parameters when not generated at ./resources/config.json.  
  default: `undefined`

---

### Main Process Accessor

use accessor when renderer process access to main(window) process.

```ts
import nextronAccessor, { useNextron } from "@bizhermit/nextron/dist/accessor"

// renderer process
const Component = () => {
    const nextron = useNextron();
    const click = () => {
        nextron.setSize({ width: 300, height: 300, animate: true });
        nextron.fetch("hello", {}).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        });
    };
    return <button onClick={click}>set size</button>;
};

// main process
const func = () => {
    const nextron = nextronAccessor();
    nextron.setSize({ width: 300, height: 300, animate: true });
};
```