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

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

Install

npm install ink react

Usage

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

…

View on GitHub

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