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.

vadimdemedes / ink

🌈 React for interactive command-line apps

---

React for CLIs. Build and test your CLI output using components.

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well If you are already familiar with React, you already know Ink.

Since Ink is a React renderer, it means that all features of React are supported Head over to React website for documentation on how to use it. Only Ink's methods will be documented in this readme.

Note: This is documentation for Ink 4. If you're looking for docs on Ink 3, check out this release.

---

^{My open source work is supported by the community ❤️}

^{Special thanks to:}

Your app, enterprise-ready.

_{Start selling to enterprise customers with just a few lines of code.}
^{Add Single Sign-On (and more) in}…

View on GitHub

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

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!

Photo by Pierre Bamin on Unsplash

Comments

[dAVE Inden]

Very cool. I found Ink awhile back and forgot about it. Thanks for reminding me! Building a CLI with React is a really cool and interesting idea. Now, I want to build something with this. :)

[Nick Taylor]

Yeah, I'd like to try building something with it too. Just need an idea...

[dAVE Inden]

Whoa. That’s cool. It is great to see npm starting to use it for their CLI. Now, I just need an idea too!