ink

  • Version 3.0.9
  • Published
  • 230 kB
  • 23 dependencies
  • MIT license

Install

npm i ink
yarn add ink
pnpm add ink

Overview

React for CLI

Index

Variables

variable Box

const Box: any;
  • <Box> is an essential Ink component to build your layout. It's like <div style="display: flex"> in the browser.

variable Newline

const Newline: any;
  • Adds one or more newline (\n) characters. Must be used within components.

variable render

const render: RenderFunction;
  • Mount a component and render the output.

variable Spacer

const Spacer: any;
  • A flexible space that expands along the major axis of its containing layout. It's useful as a shortcut for filling all the available spaces between elements.

variable Static

const Static: { <T>(props: Props<T>): any; displayName: string };
  • <Static> component permanently renders its output above everything else. It's useful for displaying activity like completed tasks or logs - things that are not changing after they're rendered (hence the name "Static").

    It's preferred to use <Static> for use cases like these, when you can't know or control the amount of items that need to be rendered.

    For example, [Tap](https://github.com/tapjs/node-tap) uses <Static> to display a list of completed tests. [Gatsby](https://github.com/gatsbyjs/gatsby) uses it to display a list of generated pages, while still displaying a live progress bar.

variable Text

const Text: any;
  • This component can display text, and change its style to make it colorful, bold, underline, italic or strikethrough.

variable Transform

const Transform: any;
  • Transform a string representation of React components before they are written to output. For example, you might want to apply a gradient to text, add a clickable link or create some text effects. These use cases can't accept React nodes as input, they are expecting a string. That's what component does, it gives you an output string of its child components and lets you transform it in any way.

Functions

function measureElement

measureElement: (node: DOMElement) => Output;

    function useApp

    useApp: () => import('../components/AppContext').Props;
    • useApp is a React hook, which exposes a method to manually exit the app (unmount).

    function useFocus

    useFocus: ({ isActive, autoFocus }?: Input) => Output;
    • Component that uses useFocus hook becomes "focusable" to Ink, so when user presses Tab, Ink will switch focus to this component. If there are multiple components that execute useFocus hook, focus will be given to them in the order that these components are rendered in. This hook returns an object with isFocused boolean property, which determines if this component is focused or not.

    function useFocusManager

    useFocusManager: () => Output;
    • This hook exposes methods to enable or disable focus management for all components or manually switch focus to next or previous components.

    function useInput

    useInput: (inputHandler: Handler, options?: Options) => void;
    • This hook is used for handling user input. It's a more convenient alternative to using StdinContext and listening to data events. The callback you pass to useInput is called for each character when user enters any input. However, if user pastes text and it's more than one character, the callback will be called only once and the whole string will be passed as input.

      import {useInput} from 'ink';
      const UserInput = () => {
      useInput((input, key) => {
      if (input === 'q') {
      // Exit program
      }
      if (key.leftArrow) {
      // Left arrow key pressed
      }
      });
      return …
      };

    function useStderr

    useStderr: () => import('../components/StderrContext').Props;
    • useStderr is a React hook, which exposes stderr stream.

    function useStdin

    useStdin: () => import('../components/StdinContext').Props;
    • useStdin is a React hook, which exposes stdin stream.

    function useStdout

    useStdout: () => import('../components/StdoutContext').Props;
    • useStdout is a React hook, which exposes stdout stream.

    Interfaces

    interface AppProps

    interface Props {}

      property exit

      readonly exit: (error?: Error) => void;
      • Exit (unmount) the whole Ink app.

      interface Instance

      interface Instance {}

        property cleanup

        cleanup: () => void;

          property clear

          clear: () => void;
          • Clear output.

          property rerender

          rerender: Ink['render'];
          • Replace previous root node with a new one or update props of the current root node.

          property unmount

          unmount: Ink['unmount'];
          • Manually unmount the whole Ink app.

          property waitUntilExit

          waitUntilExit: Ink['waitUntilExit'];
          • Returns a promise, which resolves when app is unmounted.

          interface Key

          interface Key {}
          • Handy information about a key that was pressed.

          property backspace

          backspace: boolean;
          • Backspace key was pressed.

          property ctrl

          ctrl: boolean;
          • Ctrl key was pressed.

          property delete

          delete: boolean;
          • Delete key was pressed.

          property downArrow

          downArrow: boolean;
          • Down arrow key was pressed.

          property escape

          escape: boolean;
          • Escape key was pressed.

          property leftArrow

          leftArrow: boolean;
          • Left arrow key was pressed.

          property meta

          meta: boolean;
          • [Meta key](https://en.wikipedia.org/wiki/Meta_key) was pressed.

          property pageDown

          pageDown: boolean;
          • Page Down key was pressed.

          property pageUp

          pageUp: boolean;
          • Page Up key was pressed.

          property return

          return: boolean;
          • Return (Enter) key was pressed.

          property rightArrow

          rightArrow: boolean;
          • Right arrow key was pressed.

          property shift

          shift: boolean;
          • Shift key was pressed.

          property tab

          tab: boolean;
          • Tab key was pressed.

          property upArrow

          upArrow: boolean;
          • Up arrow key was pressed.

          interface NewlineProps

          interface Props {}

            property count

            readonly count?: number;
            • Number of newlines to insert.

              1

            interface RenderOptions

            interface RenderOptions {}

              property debug

              debug?: boolean;
              • If true, each update will be rendered as a separate output, without replacing the previous one.

                false

              property exitOnCtrlC

              exitOnCtrlC?: boolean;
              • Configure whether Ink should listen to Ctrl+C keyboard input and exit the app. This is needed in case process.stdin is in raw mode, because then Ctrl+C is ignored by default and process is expected to handle it manually.

                true

              property patchConsole

              patchConsole?: boolean;
              • Patch console methods to ensure console output doesn't mix with Ink output.

                true

              property stderr

              stderr?: NodeJS.WriteStream;
              • Error stream. process.stderr

              property stdin

              stdin?: NodeJS.ReadStream;
              • Input stream where app will listen for input.

                process.stdin

              property stdout

              stdout?: NodeJS.WriteStream;
              • Output stream where app will be rendered.

                process.stdout

              interface StaticProps

              interface Props<T> {}

                property children

                readonly children: (item: T, index: number) => ReactNode;
                • Function that is called to render every item in items array. First argument is an item itself and second argument is index of that item in items array. Note that key must be assigned to the root component.

                property items

                readonly items: T[];
                • Array of items of any type to render using a function you pass as a component child.

                property style

                readonly style?: Styles;
                • Styles to apply to a container of child elements. See for supported properties.

                interface StderrProps

                interface Props {}

                  property stderr

                  readonly stderr?: NodeJS.WriteStream;
                  • Stderr stream passed to render() in options.stderr or process.stderr by default.

                  property write

                  readonly write: (data: string) => void;
                  • Write any string to stderr, while preserving Ink's output. It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two. It's similar to <Static>, except it can't accept components, it only works with strings.

                  interface StdinProps

                  interface Props {}

                    property internal_exitOnCtrlC

                    readonly internal_exitOnCtrlC: boolean;

                      property isRawModeSupported

                      readonly isRawModeSupported: boolean;
                      • A boolean flag determining if the current stdin supports setRawMode. A component using setRawMode might want to use isRawModeSupported to nicely fall back in environments where raw mode is not supported.

                      property setRawMode

                      readonly setRawMode: (value: boolean) => void;
                      • Ink exposes this function via own <StdinContext> to be able to handle Ctrl+C, that's why you should use Ink's setRawMode instead of process.stdin.setRawMode. If the stdin stream passed to Ink does not support setRawMode, this function does nothing.

                      property stdin

                      readonly stdin?: NodeJS.ReadStream;
                      • Stdin stream passed to render() in options.stdin or process.stdin by default. Useful if your app needs to handle user input.

                      interface StdoutProps

                      interface Props {}

                        property stdout

                        readonly stdout?: NodeJS.WriteStream;
                        • Stdout stream passed to render() in options.stdout or process.stdout by default.

                        property write

                        readonly write: (data: string) => void;
                        • Write any string to stdout, while preserving Ink's output. It's useful when you want to display some external information outside of Ink's rendering and ensure there's no conflict between the two. It's similar to <Static>, except it can't accept components, it only works with strings.

                        interface TextProps

                        interface Props {}

                          property backgroundColor

                          readonly backgroundColor?: LiteralUnion<typeof ForegroundColor, string>;
                          • Same as color, but for background.

                          property bold

                          readonly bold?: boolean;
                          • Make the text bold.

                          property children

                          readonly children?: ReactNode;

                            property color

                            readonly color?: LiteralUnion<typeof ForegroundColor, string>;
                            • Change text color. Ink uses chalk under the hood, so all its functionality is supported.

                            property dimColor

                            readonly dimColor?: boolean;
                            • Dim the color (emit a small amount of light).

                            property inverse

                            readonly inverse?: boolean;
                            • Inverse background and foreground colors.

                            property italic

                            readonly italic?: boolean;
                            • Make the text italic.

                            property strikethrough

                            readonly strikethrough?: boolean;
                            • Make the text crossed with a line.

                            property underline

                            readonly underline?: boolean;
                            • Make the text underlined.

                            property wrap

                            readonly wrap?: Styles['textWrap'];
                            • This property tells Ink to wrap or truncate text if its width is larger than container. If wrap is passed (by default), Ink will wrap text and split it into multiple lines. If truncate-* is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off.

                            interface TransformProps

                            interface Props {}

                              property children

                              readonly children?: ReactNode;

                                property transform

                                readonly transform: (children: string) => string;
                                • Function which transforms children output. It accepts children and must return transformed children too.

                                Type Aliases

                                type BoxProps

                                type Props = Except<Styles, 'textWrap'> & {
                                /**
                                * Margin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.
                                *
                                * @default 0
                                */
                                readonly margin?: number;
                                /**
                                * Horizontal margin. Equivalent to setting `marginLeft` and `marginRight`.
                                *
                                * @default 0
                                */
                                readonly marginX?: number;
                                /**
                                * Vertical margin. Equivalent to setting `marginTop` and `marginBottom`.
                                *
                                * @default 0
                                */
                                readonly marginY?: number;
                                /**
                                * Padding on all sides. Equivalent to setting `paddingTop`, `paddingBottom`, `paddingLeft` and `paddingRight`.
                                *
                                * @default 0
                                */
                                readonly padding?: number;
                                /**
                                * Horizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`.
                                *
                                * @default 0
                                */
                                readonly paddingX?: number;
                                /**
                                * Vertical padding. Equivalent to setting `paddingTop` and `paddingBottom`.
                                *
                                * @default 0
                                */
                                readonly paddingY?: number;
                                };

                                  type DOMElement

                                  type DOMElement = {
                                  nodeName: ElementNames;
                                  attributes: {
                                  [key: string]: DOMNodeAttribute;
                                  };
                                  childNodes: DOMNode[];
                                  internal_transform?: OutputTransformer;
                                  isStaticDirty?: boolean;
                                  staticNode?: any;
                                  onRender?: () => void;
                                  onImmediateRender?: () => void;
                                  } & InkNode;

                                    Package Files (21)

                                    Dependencies (23)

                                    Dev Dependencies (36)

                                    Peer Dependencies (2)

                                    Badge

                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ink.

                                    • Markdown
                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ink)
                                    • HTML
                                      <a href="https://www.jsdocs.io/package/ink"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>