Scrollbar Component for Ink
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example Initial Implementation Mar 27, 2018
media Add second demo Mar 27, 2018
src Test all the things Mar 27, 2018
test/components Test all the things Mar 27, 2018
.gitignore Initial Implementation Mar 27, 2018
.travis.yml Initial Implementation Mar 27, 2018 Update Mar 29, 2018
package.json 1.0.0 Mar 27, 2018

ink-scrollbar Build Status XO code style

Scrollbar Component for Ink

Useful if you want to show a big list of items and don't want to display all of them at the same time.

Currently only works with simple (single-line) elements. Working on rewriting to work with any type of children passed.


Normal scrolling (code in the example below):

Demo Image

Adding items to the list:

Demo Image


$ npm install ink-scrollbar


const {h, render, Component, Text} = require('ink');
const Scrollbar = require('../lib');

const items = Array.apply(null, Array(15)).map((s, i) => i);

class Example extends Component {
  constructor() {
    this.state = {
      cursor: 0,

    this.getCursor = this.getCursor.bind(this);

  render() {
    return (
      <Scrollbar show={5} current={this.state.cursor} padding={3} highlight>
        { => <Text>{this.getCursor(i)}{i}</Text>)}

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({cursor: (this.state.cursor + 1) % items.length});
    }, 300);

  componentWillUnmount() {

  getCursor(i) {
    const {cursor} = this.state;
    if(i==cursor) {
      return '\u00A0';
    } else {
      return '\u00A0\u00A0';

const unmount = render(<Example/>);




Type: Number Default: 1

Amount of items to show. If this is larger or equal to the amount of children given, all the items will be displayed and the scrollbar will not be rendered.


Type: Number Default: 0

The index of the currently selected item. This item will always be visible.


Type: string Default:

This character is used for the thumb of the scrollbar.


Type: Number Default: 1

Amount of space between the items and the scrollbar.


Type: Boolean | Object Default: false

Wether to highlight or not the current item. If an object is passed, it will be passed to the wrapping Text component as props.


MIT © 2018 George Karagkiaouris