@jarboer/electron-prompt

electron-prompt

Electron helper to prompt for a value via input or select

Installation

npm i @jarboer/electron-prompt

Examples

See basic-prompt-example for more an example program.

Example 1 - Using betterPrompt()

import { app, BrowserWindow } from 'electron';
import { betterPrompt } from 'electron-prompt';

let mainWindow: BrowserWindow | null;

// Electron window setup code...

// Wait for the prompt to close before continuing execution of this code section (block)
const result = await betterPrompt({
    title: 'Select an Option',
    subtitle: 'Please select an option',
    type: 'select',
    selectOptions: {
        '1': 'Option 1',
        '2': 'Option 2',
        '3': 'Option 3',
        '4': 'Option 4',
        '5': 'Option 5',
        '6': 'Option 6',
        '7': 'Option 7',
        '8': 'Option 8',
        '9': 'Option 9',
        '10': 'Option 10'
    }
}, mainWindow);

if (result) {
    console.log("Result:", result);
}

Example 2 - Using prompt()

import { prompt } from 'electron-prompt';

prompt({
    title: 'Prompt example',
    subtitle: 'URL:',
    type: 'input'
    inputTextOptions: [
        {
            value: 'http://example.org',
            inputAttrs: {
                type: "url",
                required: false
            }
        }
    ],
})
.then((r: any) => {
    if(r === null) {
        console.log('user cancelled');
    } else {
        console.log('result', r);
    }
})
.catch(console.error);

Documentation

Primary method:

const result = betterPrompt(promptOptions, window);

Old primary method:

prompt(options, parentBrowserWindow).then(...).catch(...);

Options object (optional)

If not supplied, it uses the defaults listed in the table below.

ElectronPromptOptions

Used to define the prompt's information object

Key	Optional?	Type	Explanation
title	true	string	The title of the prompt window. Defaults to 'Prompt', or to 'Sign into your Account' for the 'login' type.
useHtmlTitle	true	boolean	Whether the title should be interpreted as HTML or not. Defaults to false.
subtitle	true	string	The subtitle of the prompt window. Defaults to 'Please input a value', or to 'Enter your account credentials' for the 'login' type.
useHtmlSubtitle	true	boolean	Whether the subtitle should be interpreted as HTML or not. Defaults to false.
type	true	'input', 'select', 'login', or undefined	The type of input field/prompt, enter 'input' for a standard text input field, 'select' for a dropdown type input, or 'login' for a prompt with 2 input fields setup to take a username/email and password. Defaults to 'input'.
labelOptions	true	LabelData[ ]	The options for the label(s). Defaults to nothing/undefined for the 'input' type, or stuff relating to username, and password for 'login'.
inputTextOptions	true	InputData[ ]	The options for the text input(s). Defaults to text and required for the 'input' type, or text and password for a username and password respectively for 'login'.
buttonLabels	true	ButtonLabels	The text for the submit/cancel buttons. Defaults to 'Ok' and 'Cancel', or to 'Sign in' for the 'login' type (note: the cancel button isn't shown for 'login').
selectOptions	true	StringDictionary	The items for the select dropdown if using the 'select' type in the format '<value>': '<display text>', where the <value> is what will be given to the then block and the <display text> is what the user will see. Defaults to nothing/undefined.
defaultSelectOption	true	string	The default option to select when using the 'select' type. Defaults to nothing/undefined.
selectMultiple	true	boolean	Allows multiple options to be selected when using the 'select' type. Defaults to nothing/undefined.
height	true	number	The height of the prompt window. Defaults to 180, or to 540 for the 'login' type.
minHeight	true	number	The minimum allowed height for the prompt window. Same default value as height.
width	true	number	The width of the prompt window. Defaults to 390, or to 600 for the 'login' type.
minWidth	true	number	The minimum allowed width for the prompt window. Same default value as width.
resizable	true	boolean	Whether the prompt window can be resized or not (also sets useContentSize). Defaults to false.
minimizable	true	boolean	Whether the minimize button shows on the title bar. You'll want to disable skipTaskbar so it can't disappear completely. Defaults to false.
fullscreenable	true	boolean	Whether the prompt can be made fullscreen. Defaults to false.
maximizable	true	boolean	Whether the maximize button shows on the title bar. Defaults to false.
alwaysOnTop	true	boolean	Whether the window should always stay on top of other windows. Defaults to false.
icon	true	string	The path to an icon image to use in the title bar. Defaults to undefined and uses electron's icon.
customStylesheet	true	string	The local path of a CSS file to stylize the prompt window. Defaults to undefined.
menuBarVisible	true	boolean	Whether to show the menubar or not. Defaults to false.
skipTaskbar	true	boolean	Whether to not show the prompt window icon on taskbar. Defaults to true.
showWhenReady	true	boolean	Whether to only show the prompt window once content is loaded. Defaults to false.
devMode	true	boolean	Whether to enable dev tools for the prompt window (also shows the menu bar). You'll probably want to enable resizing. Defaults to false.

InputElement

Used to define an input element's type, the options are: 'button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'.

StringDictionary

Used to define a string dictionary where the key and value are strings.

Type def: [key: string]: string;

Example:

{
    'value1': 'hi',
    'value2': 'hey',
    'value3': 'hello'
}

LabelData

Key	Optional?	Type	Explanation
content	true	string	The label which appears on the prompt for the input field. Defaults to nothing/undefined.
htmlFor	true	string	Defines which html element the label is for. Defaults to nothing/undefined.
useHtmlLabel	true	boolean	Whether the label should be interpreted as HTML or not. Defaults to false.

InputAttrs

Key	Optional?	Type	Explanation
type	false	InputElement	Define the input element's type.
required	false	boolean	Define if the input element is required to be completed in a form.

InputData

Key	Optional?	Type	Explanation
id	true	string	The id for the input element which appears on the prompt for the input field. The name will also be set to this (for labels). Defaults to nothing/undefined.
placeholder	true	string	The placeholder which appears on the prompt for the input field. Defaults to being blank/undefined.
value	true	string	The default value for the input field. Defaults to being blank/undefined.
inputAttrs	true	InputAttrs	The attributes of the input field, analogous to the HTML attributes: {type: 'text', required: true} -> <input type="text" required>. Used if the type is 'input'.

ButtonLabels

Key	Optional?	Type	Explanation
submit	true	string	Define the display text for the submit button.
cancel	true	string	Define the display text for the cancel button.

parentBrowserWindow (optional)

The window in which to display the prompt on. If not supplied, the parent window of the prompt will be null.