Ink Tab

https://jdeniau.gitbook.io/ink-tab
Admin
Ink Tab is a tab component for Ink, a React-like framework for building command-line user...
Tokens:2,433
Snippets:18
Trust Score:10
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install ink-tab using npm or yarn

Source: https://jdeniau.gitbook.io/ink-tab/usage

Install the ink-tab library using either npm or yarn package managers. This is the first step before using the component in your project.

```bash
npm install ink-tab
```

```bash
yarn add ink-tab
```

--------------------------------

### React Functional Component Example with ink-tab

Source: https://jdeniau.gitbook.io/ink-tab/usage

Demonstrates how to use the ink-tab component within a React functional component. It utilizes the useState hook to manage the active tab and includes a handler for tab changes. Dependencies include React, ink, and ink-tab.

```jsx
import React, { useState } from 'react';
import { render, Box, Color } from 'ink';
import { Tabs, Tab } from 'ink-tab';

function TabExample(props) {
  const [activeTabName, setActiveTabName] = useState(null);

  // the handleTabChange method get two arguments:
  // - the tab name
  // - the React tab element
  function handleTabChange(name, activeTab) {
    // set the active tab name to do what you want with the content
    setActiveTabName(name);
  }

  return (
    <Box flexDirection="column">
      <Box>
        <Text>
          {activeTabName === 'foo' && 'Selected tab is "foo"'}
          {activeTabName === 'bar' && 'Selected tab is "bar"'}
          {activeTabName === 'baz' && 'Selected tab is "baz"'}
        </Text>
      </Box>

      <Tabs onChange={handleTabChange}>
        <Tab name="foo">Foo</Tab>
        <Tab name="bar">Bar</Tab>
        <Tab name="baz">Baz</Tab>
      </Tabs>
    </Box>
  );
}

render(<TabExample />);
```

--------------------------------

### React Class Component Example with ink-tab

Source: https://jdeniau.gitbook.io/ink-tab/usage

Illustrates the usage of the ink-tab component within a React class component. It uses the component's state to track the active tab and provides a method to handle tab changes. This example requires React, ink, and ink-tab.

```jsx
import React, { Component } from 'react';
import { render, Box, Color } from 'ink';
import { Tabs, Tab } from 'ink-tab';

class TabExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      activeTabName: null,
    };

    this.handleTabChange = this.handleTabChange.bind(this);
  }

  // the handleTabChange method get two arguments:
  // - the tab name
  // - the React tab element
  handleTabChange(name, activeTab) {
    // set the active tab name to do what you want with the content
    this.setState({
      activeTabName: name,
    });
  }

  render() {
    return (
      <Box flexDirection="column">
        <Box>
          <Text>
            {this.state.activeTabName === 'foo' && 'Selected tab is "foo"'}
            {this.state.activeTabName === 'bar' && 'Selected tab is "bar"'}
            {this.state.activeTabName === 'baz' && 'Selected tab is "baz"'}
          </Text>
        </Box>

        <Tabs onChange={this.handleTabChange}>
          <Tab name="foo">Foo</Tab>
          <Tab name="bar">Bar</Tab>
          <Tab name="baz">Baz</Tab>
        </Tabs>
      </Box>
    );
  }
}

render(<TabExample />);
```

--------------------------------

### Tabs Component API

Source: https://jdeniau.gitbook.io/ink-tab/api/tabs

Documentation for the Tabs component, including its children, event handlers, styling options, and behavior.

```APIDOC
## Tabs Component

### Description
The `<Tabs>` component is used to create tabbed interfaces within an Ink application. It requires `<Tab>` children and offers various props for customization and behavior control.

### Props

#### children
- **Type**: `React.ReactNode`
- **Description**: Must only contain `Tab` children.

#### onChange
- **Type**: `Function`
- **Parameters**:
  - `name`: (string) - The name specified in the `name` prop of the active tab.
  - `activeTab`: (React.ReactNode) - The current active tab component.
- **Description**: Called on component start and on every tab change.

#### colors
- **Type**: `Object`
- **Description**: Allows overriding the default color of the active tab. Expects an object with an `activeTab` property, which itself is an object containing `color` and `backgroundColor`.
  - `activeTab.color` (string) - The text color of the active tab.
  - `activeTab.backgroundColor` (string) - The background color of the active tab.

#### keyMap
- **Type**: `Object`
- **Description**: Overrides the default keyboard shortcuts for navigating tabs. The default keyMap allows left/right or up/down navigation, shift+tab/tab for previous/next tab, and meta+1-9 for direct tab selection.
  - `useTab` (boolean) - Whether to use Tab/Shift+Tab for navigation (disabled if focus is managed externally).
  - `useNumbers` (boolean) - Whether to use meta+number keys for direct tab selection.
  - `previous` (Array<string>) - Array of keys to move to the previous tab.
  - `next` (Array<string>) - Array of keys to move to the next tab.

#### flexDirection
- **Type**: `string`
- **Description**: Determines the direction of the tabs. Can be set to `"column"` to create a vertical tab layout. This prop is passed down to the containing `<Box>` component.

#### width
- **Type**: `string | number`
- **Description**: When `flexDirection` is set to `"column"`, this prop is used to force the separator width.

#### defaultValue
- **Type**: `string`
- **Description**: Sets the initially active tab by its name. If not provided, the first tab is active by default.

#### showIndex
- **Type**: `boolean`
- **Description**: Controls the display of an index number before each tab. Defaults to `true`. Set to `false` to hide the indices.

#### isFocused
- **Type**: `boolean`
- **Description**: Used for external focus management. When `true` or `false`, the TAB key is disabled for tab navigation. Recommended for integrating with Ink's focus management system.

### Request Example (Usage with custom colors)
```jsx
<Tabs
  colors={{ activeTab: { color: 'red', backgroundColor: 'grey' } }}
>
  <Tab name="tab1">Tab 1</Tab>
  <Tab name="tab2">Tab 2</Tab>
</Tabs>
```

### Request Example (Usage with custom keyMap)
```jsx
<Tabs
  keyMap={{
    useTab: false,
    useNumbers: false,
    previous: ['h', 'j'],
    next: ['k', 'l'],
  }}
>
  <Tab name="a">Tab A</Tab>
  <Tab name="b">Tab B</Tab>
</Tabs>
```

### Request Example (Vertical Tabs with focus management)
```jsx
import { useFocus } from 'ink';
import { Tabs, Tab } from 'ink-tab';

function FocusableTabs() {
  const { isFocused } = useFocus({ autoFocus: true });

  return (
    <Tabs isFocused={isFocused} flexDirection="column">
      <Tab name="foo">Some tab</Tab>
      <Tab name="bar">Another tab</Tab>
    </Tabs>
  );
}
```

### Response
- **N/A**: This component does not have a direct response in terms of API calls. Its output is rendered directly within the Ink terminal interface.
```

--------------------------------

### Override Tab Navigation Keymap

Source: https://jdeniau.gitbook.io/ink-tab/api/tabs

Enables customization of keyboard shortcuts for navigating between tabs. You can disable default behaviors like using tab numbers or the tab key, and define custom key bindings for previous and next tab navigation. Useful for integrating with custom input handling.

```javascript
<Tabs keyMap={{
    useTab: false,
    useNumbers: false,
    previous: ['h', 'j'],
    next: ['k', 'l'],
}}>
```
```

--------------------------------

### External Focus Management for Tabs Component

Source: https://jdeniau.gitbook.io/ink-tab/api/tabs

Manages the focus state of the Tabs component externally. When `isFocused` prop is explicitly controlled (true or false), the default TAB key navigation is disabled. This is useful when the focus is handled by a parent component or the overall application state.

```javascript
import { useFocus } from 'ink';
import { Tabs, Tab } from 'ink-tab';

function FocusableTabs() {
  const { isFocused } = useFocus({ autoFocus: true });

  return (
    <Tabs isFocused={isFocused}>
      <Tab name="foo">Some tab</Tab>
    </Tabs>
  );
}

```

--------------------------------

### Customize Tab Colors in Tabs Component

Source: https://jdeniau.gitbook.io/ink-tab/api/tabs

Allows overriding the default active tab colors. Accepts an object with 'activeTab' property, which itself is an object containing 'color' and 'backgroundColor'. This helps in visually differentiating the active tab.

```tsx
<Tabs
  colors={{ activeTab: { color: 'red', backgroundColor: 'grey' } }}
>
```
```
Tokens:
Raw