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.

The https://github.com/vadimdemedes/ink repository 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.

ink is extremely exciting and you should all check it out. The @npmjs CLI team intends to move a lot of our UI over to it, and I've had so much fun developing some early prototypes of interactive installers and updaters with this! Kudos to Vadim for some amazing work! https://t.co/JwAd3jwuj5

— kat (@zkat__) March 6, 2019

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