Creating CLI with React
Nowadays, CLIs have better designs and are much easier to work with. Even their functionality has been extended a lot. CLIs are no longer limited to hardcore programmers anymore.
In this article, we talk about how to build a CLI tool using React. We discuss two libraries that can be used for this: INK and React-Blessed.
There are many benefits to building your CLI using React. An obvious one would be to use what you already know, but another one would be to fully embrace component-driven design. This enables you to handle your CLI components the same way you would handle any other UI component. For example, you can share and reuse your CLI components in a component hub like Bit (Github). You can create different themes, and so on.
INK vs React-Blessed
The main difference between React-Blessed and INK is React-blessed is more oriented towards user interface with the full screen while INK is aimed to be used in simple interactive user interfaces.
There are key points to be noted about the popularity between react-Blessed and INK. According to npm trends, the number of downloads of the INK in the past three months is much greater than that of React-Blessed. Also, Github repo of INK has a more star rating compared to React-Blessed. It’s also important to remember that INK has a much wider community compared to React-Blessed so you will have access to more resources and can receive more help in case you face an issue.
INK
INK is a custom react renderer who renders the components to text along with the ANSI (American National Standards Institute) escape code. It also allows us to utilize the flexbox for layouts. With INK, you can use JSX to build our own pretty easy to use CLI.
Let’s do some examples to know how to use the tool.
Example 1:
Create a new directory/folder called INK-React.
This may be a fresh project with React and INK. So, let us have an empty directory.
Create a package.json file in the empty directory i.e. INK-React
Use the npm init command to generate the JSON file.
The generated package.json file will contain the following code.
change the value of “scripts” as follows.
“scripts”: {“start”: “node index.js”,“test”: “echo \”Error: no test specified\” && exit 1"},
Next, install INK and its dependencies.
npm install ink react -S
Create a file called cli.js which contains the application code.
Next, we are going to install babel.
We need several babel tools for examples we do in this article. let’s install them now.
npm install @babel/register @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
Now, create a config file named babel.config.js in the root of the INK-React directory.
create index.js file and add the following code line to register the application with babel.
Finally, let’s run our example code.
npm start
Output:
Example 2:
Let us implement another useful INK component. Here we give users options to select in a CLI interface.
Install ink-select-input module as follows.
npm install ink-select-input
Import SelectInput from the ink-select-input module into the cli.js file.
import SelectInput from “ink-select-input”;
open the cli.js file and replace the existing code with following code snippets.
Run the project.
npm start
Output :
Example 3:
This example shows how to access the commands in package.json. First, import the package.json file into the cli.js file.
import packageJson from “./package.json”;
write the following code in the cli.js file.
Now, run the project.
npm start
Example 4:
In this example, you can select a certain option and exit the CLI. Replace the content of the cli.js file with the following code.
Output :
Example 5:
In this example, we will construct a table by implementing INK. Let’s install a chance module that provides some random users.
npm install chance
Add the following code in the cli.js file. First, store some random users and their corresponding details.
Create a function called Table as below.
Add the following code snippets which are corresponding to table data.
Finally, let us render the Table function.
Now let us run the project.
npm start
Output:
Example 6 :
In this example, we will add different borders to the <Box/> component to give you an idea about different styling allowed in INK.
You have to use the ink-box module for that.
npm install ink-box
Next, I will write the following code in the cli.js file.
Now, execute the code.
npm start
Example 7:
Let’s create a bordered table with the aid of the ink-table component. First, install it.
npm install ink-table
Import the ink component ink-table as follows.
import Table from “ink-table”;
Add the following in the cli.js file.
Output :
Example 8:
In this example, we will create an awesome font using the ink component ink-ascii. Let’s start with installing ink-ascii.
npm install ink-ascii
Open the cli.js file and import the ink-ascii module.
Next, add the following code in the cli.js file.
Output:
I think we have done enough examples of INK for you to get an understanding of how to use it. So let’s move on to React-Blessed now.
React-Blessed
React-Blessed is based on Blessed which is a Nodejs library to build terminal interfaces. Basically, React-Blessed renders blessed widgets in React. It has a basic layout. So let’s see how to work with React-Blessed.
Similar to what we did with INK, here also, we will do a set of code examples with React-Blessed.
First, create a fresh directory which will name as React-Blessed-Examples. Next, create the package.json file with the following command.
npm init -y
The generated package.json file will have the following content.
You need to change the value of the “scripts” in the package json as follows.
Now, let’s install the React-Blessed library and its dependencies.
npm install blessed reactnpm install react-blessed
Next, we have to install Babel which is a JavaScript compiler that converts JSX into regular JavaScript. We need the following 4 tools for this tutorial.
npm install @babel/core @babel/register @babel/preset-env @babel/preset-react
Next, we will need the index.js file. It is required to register the index.js with babel and two presets which are preset-env and preset-react. Add the following code segment in the index.js file.
Finally, let’s create the home.js file which contains the actual code. First, import the necessary libraries.
Example 1:
Our first example is to print a small text to CLI.
It will return the following output.
Example 2:
For our second example, we will create a react-blessed box and modify the above example with the current date and time. Open the Home.js file and include the following code.
Output:
Example 3:
For our third example, we will create a counter. For that, we need to import some functions into the home.js.
Add the following code to create the counter.
Output:
Example 4:
Our final example of React-Blessed will be a progress bar. We need to import progress bar from blessed to create the progress bar. Let’s see how our home.js file should be changed.
Create a class named ProgressBar.
Insert the following code segments into the above-defined class.
Define the Blessed screen and render the class and screen as follows.
Output:
Conclusion:
Nowadays, CLIs are more interactive. When we analyze the examples for each library (React-Blessed and INK), we can see both of them provide more attractive CLI and useful commands. They accept user inputs and render variations of UI (user interfaces). They both are having improved and well-developed designs and are very pleasant to work with.
