loading...
Cover image for Ink: React for CLIs

Ink: React for CLIs

nickytonline profile image Nick Taylor (he/him) Originally published at iamdeveloper.com on ・1 min read

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.

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 3. If you're looking for docs on Ink 2, check out this release. There's also a migration guide from Ink 2 available.

Install

$ npm install ink react

Usage

import React, {useState, useEffect} from 'react'
import {render, Text

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

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!

Posted on by:

nickytonline profile

Nick Taylor (he/him)

@nickytonline

Senior software engineer at DEV/Forem. Caught the live coding bug on Twitch at livecoding.ca

Discussion

pic
Editor guide
 

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. :)

 

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

 

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