inquirer-select-pro

An inquirer select that supports multiple selections and filtering/searching.

Install

pnpm i inquirer-select-pro

npm i inquirer-select-pro

Try now?

npx @jeffwcx/gitignore

A CLI to generate a .gitignore file: @jeffwcx/gitignore.

Usage

Multiple selection and async data source

import { select } from 'inquirer-select-pro';
const answer = await select({
  message: 'select',
  options: async (input) => {
    const res = await fetch('<url>', {
      body: new URLSearchParams({ keyword: input }),
    });
    if (!res.ok) throw new Error('fail to get list!');
    return await res.json();
  },
});

Radio mode

import { select } from 'inquirer-select-pro';
const answer = await select({
  message: 'select...',
  mutiple: false,
  options: [
    { name: 'Apple', value: 'apple' },
    { name: 'Banana', value: 'banana' },
  ],
});

API

select()

An inquirer select that supports multiple selections and filtering

Parameters

• config SelectProps <Value, Multiple>

Returns

CancelablePromise <Value>

Examples

import { select } from 'inquirer-select-pro';
const answer = await select({
  message: 'select',
  options: async (input) => {
    const res = await fetch('<url>', {
      body: new URLSearchParams({ keyword: input }),
    });
    if (!res.ok) throw new Error('fail to get list!');
    return await res.json();
  },
});

useSelect()

[!WARNING] This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Type

declare function useSelect<Value, Multiple extends boolean>(
  props: UseSelectOptions<Value, Multiple>,
): UseSelectReturnValue<Value>;

Parameters

• props UseSelectOptions<Value, Multiple>

Returns

UseSelectReturnValue<Value>

Theming

Type

export type SelectTheme = {
  prefix: string;
  spinner: {
    interval: number;
    frames: string[];
  };
  icon: {
    checked: string;
    unchecked: string;
    cursor: string;
    inputCursor: string;
  };
  style: {
    answer: (text: string) => string;
    message: (text: string) => string;
    error: (text: string) => string;
    help: (text: string) => string;
    highlight: (text: string) => string;
    key: (text: string) => string;
    disabledOption: (text: string) => string;
    renderSelectedOptions: <T>(
      selectedOptions: ReadonlyArray<SelectOption<T>>,
      allOptions: ReadonlyArray<SelectOption<T> | Separator>,
    ) => string;
    emptyText: (text: string) => string;
    placeholder: (text: string) => string;
  };
  helpMode: 'always' | 'never' | 'auto';
};

Examples

await renderPrompt({
  message,
  placeholder: 'search',
  options: () => top100Films,
  pageSize: 2,
  instructions: false,
  theme: {
    icon: {
      inputCursor: 'filter: ',
      checked: ' √',
      unchecked: ' ',
    },
    style: {
      placeholder: (text: string) => `${text}...`,
    },
  },
});

The appearance is as follows:

? Choose movie:
filter:  The Shawshank Redemption (1994)
> √ The Shawshank Redemption (1994)
    The Godfather (1972)

How to contribute？

1. Fork the project

2. Start development

git clone https://github.com/yourname/inquirer-select-pro.git
cd inquirer-select-pro
pnpm i
# Create a branch
git checkout -b my-new-feature
# Develop
pnpm dev
# Build
pnpm build
# Test
pnpm test

[!NOTE] Running pnpm dev actually allows you to specify the demo directly.

Here is a list of available demos:

• local
• remote
• filter-remote
• filter-local

pnpm dev filter-remote

Parameters can also be fixed. The following parameters can be fixed:

• filter
• clearInputWhenSelected
• required
• loop
• multiple

pnpm dev filter-demo --multiple=false

3. Commit changes to your branch git commit -am 'Add some feature'

4. Push your branch git push origin my-new-feature

5. Submit a pull request