Ink: React for CLIs

Photo by Pierre Bamin on Unsplash

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.

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


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/>);

And here's the author of Gatsby working on a build flow using Ink.

The jest example is also very cool.

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

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!

This post is also available on DEV.