inquirer-select-with-banner

An Inquirer.js select prompt that displays a dynamic banner above the choices, updating as the user navigates through options.

Screen recording

Inspired by inquirer-select-with-state, the core difference being that the banner function is given what the user is currently hovering on, allowing for context aware information to be shown.

Installation

npm install inquirer-select-with-banner

Usage

import { select } from 'inquirer-select-with-banner';

const choice = await select<string>({
  message: 'Choose your weapon!',
  choices: [
    'Battle Axe',
    'Sword',
    'Bow and Arrow',
    'Spear',
    'Shield',
    'Hammer',
    'Mace',
    'Dagger',
    'Pencil',
    'Flail',
    'Scimitar',
    'Crossbow',
    'Staff',
  ],
  // Thiscontrols the banner.
  // return `string` to display a banner
  // `undefined` or '' to clear the banner
  // `null` to preserve the previous banner 
  banner: choice => {
    switch (choice.value) {
      case 'Battle Axe':
      case 'Mace':
      case 'Flail': return 'Heavy';
      case 'Staff': return 'You shall not pass!';
      case 'Sword':
      case 'Dagger':
      case 'Scimitar': return 'Pointy';
      case 'Bow and Arrow':
      case 'Crossbow': return 'Ahh, from afar!';
      case 'Pencil': return 'Hello John Wick';
      default: return 'Nice Choice';
    }
  },
});

console.log('You chose:', choice);

The return value of the banner function should be a string that controls what the banner displays. If you want the banner to not update, you can pass null to have it reuse the previous selection's banner.