DEV Community

Cover image for Day 1: React in Terminal 🎨
Valeria
Valeria

Posted on

4 1

Day 1: React in Terminal 🎨

Ho-ho-ho! The time is finally here and, following the suggested format, the first gift I'd like to share with you is this amazing gem: https://term.ink/.

This library allows you to write terminal interfaces using React!

It works great with node, but the easiest way to try it out and avoid setting up TypeScript is by using Deno.

Install dependencies:

deno add npm:ink npm:react
Enter fullscreen mode Exit fullscreen mode

Create a script, e.g. main.tsx:

import React, { useState, useEffect } from "npm:react";
import { render, Text } from "npm:ink";

const Counter = () => {
  const [counter, setCounter] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCounter((previousCounter: number) => previousCounter + 1);
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <Text color="green">{counter} tests passed</Text>;
};

render(<Counter />);
Enter fullscreen mode Exit fullscreen mode

And run with deno run -A main.tsx:

Spinner showing X tests passed

But that's not all! How about something like this?

Counter with background

And the code for it is:

import React, { useState, useEffect } from "npm:react";
import { render, Text, Box } from "npm:ink";

const Counter = () => {
  const [counter, setCounter] = useState<number>(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCounter((previousCounter: number) => previousCounter + 1);
    }, 100);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <Box borderStyle="double" margin={2} padding={2}>
      <Text backgroundColor="green">{counter}</Text> 
      <Text> tests passed</Text>
    </Box>
  );
};

render(<Counter />);
Enter fullscreen mode Exit fullscreen mode

Good luck with your next command line interface app!

Liked the content and would love to have more of it all year long?

Buy Me A Coffee

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (1)

Collapse
 
pengeszikra profile image
Peter Vivo

Good to know this way still exists.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay