Ink: React for CLIs

This one is short and sweet.

Are you familiar with React? Then you know Ink. I haven’t tried this out yet, but basically it’s a custom React renderer that allows you to build beautiful CLIs.

OpenGraph preview for https://github.com/vadimdemedes/ink

Flexbox in a CLI? 🤯 React hooks in a CLI? YOLO my friend, YOLO.

Holy Forking Shirt!

Here’s a little example straight from the repository’s ReadME:

import React, {Component} from 'react';
import {render, Color} from 'ink';

class Counter extends Component {
  constructor() {
    super();

    this.state = {
      i: 0
    };
  }

  render() {
    return (
      <Color green>
        {this.state.i} tests passed
      </Color>
    );
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        i: this.state.i + 1
      });
    }, 100);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

render(<Counter/>);

Even the folks at npm think it’s kinda cool.

The Tweet has been deleted.

Vadim, the author of Ink has a great intro post to it, Building rich command-line interfaces with Ink and React.

So what are you going to build with Ink? 😉

Happy coding!

Photo by Pierre Bamin on Unsplash