DEV Community

Cover image for Ink: React for CLIs
Nick Taylor
Nick Taylor Subscriber

Posted on • Originally published at iamdeveloper.com on

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.

GitHub logo vadimdemedes / ink

🌈 React for interactive command-line apps




Ink


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

Build Status npm

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 and 5. If you're looking for docs on Ink 3, check out this release.


Install

npm install ink react
Enter fullscreen mode Exit fullscreen mode

Usage

import React, {useState, useEffect} from 'react';
import {render, Text
Enter fullscreen mode Exit fullscreen mode

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

![Holy Forking Shirt!](https://media.giphy.com/media/xT0xeGWDzEfcsd8QzC/giphy.gif)

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/>);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
daveskull81 profile image
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. :)

Collapse
 
nickytonline profile image
Nick Taylor • Edited

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

Collapse
 
daveskull81 profile image
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!