ink-titled-box

A component for using titled borders in Ink. It is an extension of the Box component of Ink.

Installation

The library uses the peer dependencies react and ink.

NPM

npm i @mishieck/ink-titled-box

Bun

bun add @mishieck/ink-titled-box

Features

Border Styles

Note: Arrow borders do not work with the titles.

Positions

Title Styles

Colors

Props

borderStyle

This is the same as that in Ink, except it is required.

titles

An array of titles for the border.

titleStyles

The styles of titles as shown in Title Styles. Without styles, the titles have a transparent background and padded on both ends with a space. The value is an object with the following properties:

• start: the character before the title.
• end: the character after the title.

The library provides some title styles through the export titleStyles. You can create your own in addition to those.

Usage

The snippet below shows how to use the library.

import React from "react";
import { render, Text } from "ink";
import {TitledBox, titleStyles} from "@mishieck/ink-titled-box";

const Demo: React.FC = () => (
    <TitledBox
        borderStyle="single"
        titles={["Demo"]}
        titleStyles={titleStyles.rectangle}
    >
      <Text>Demo</Text>
    </TitledBox>
);

render(<Demo />);