ink-gradient

What is ink-gradient?

The ink-gradient package is used to apply gradient colors to text in Ink applications, which are React-based CLI applications. It allows developers to enhance the visual appeal of their command-line interfaces by adding colorful gradients to text output.

What are ink-gradient's main functionalities?

Basic Gradient Application

This feature allows you to apply a basic gradient to text. In this example, the 'rainbow' gradient is applied to the text 'Hello, world!' using the Ink framework.

const Gradient = require('ink-gradient');
const { h, render } = require('ink');

const App = () => (
  <Gradient name="rainbow">
    Hello, world!
  </Gradient>
);

render(<App />);

Custom Gradient Colors

This feature allows you to define custom colors for the gradient. In this example, a gradient is created using red, green, and blue colors for the text 'Custom Gradient!'.

const Gradient = require('ink-gradient');
const { h, render } = require('ink');

const App = () => (
  <Gradient colors={['#FF0000', '#00FF00', '#0000FF']}>
    Custom Gradient!
  </Gradient>
);

render(<App />);

Other packages similar to ink-gradient

chalk

Chalk is a popular package for styling terminal strings in Node.js. While it doesn't specifically focus on gradients, it provides a wide range of text styling options, including colors, background colors, and text decorations. Chalk is more versatile for general text styling, whereas ink-gradient is specialized for gradient effects in Ink applications.

gradient-string

Gradient-string is a package that allows you to apply gradient colors to strings in the terminal. It is similar to ink-gradient in that it focuses on gradient effects, but it is not specifically designed for use with Ink applications. Gradient-string can be used in any Node.js application to create colorful text outputs.

README

ink-gradient

Gradient color component for Ink

Install

npm install ink-gradient

Usage

import React from 'react';
import {render} from 'ink';
import Gradient from 'ink-gradient';
import BigText from 'ink-big-text';

render(
	<Gradient name="rainbow">
		<BigText text="unicorns"/>
	</Gradient>
);

API

<Gradient>

It accepts a string or Ink component as children. For example, <Box/>.

Props

name

Type: string

The name of a built-in gradient.

Mutually exclusive with colors.

colors

Type: string[] | object[]

Colors to use to make the gradient.

Mutually exclusive with name.

Related

• ink-big-text - Awesome text component for Ink
• ink-link - Link component for Ink