sindresorhus / ink-big-text

Awesome text component for Ink

ink-big-text

Awesome text component for Ink

Install

npm install ink-big-text

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

<BigText/>

Props except for text are passed as options to cfonts. The only difference is that the background option is named backgroundColor here. See the prop types in index.tsx for more.

Related

• ink-gradient - Gradient color component for Ink
• ink-link - Link component for Ink

ink-big-text's Issues

ESM Compatibility

When I attempted to upgrade my project to Ink 4 / ESM, I got the following error related to ink-big-text:

/Users/jrr/repos/inkle/node_modules/ink-big-text/dist.js:5
var _ink = require("ink");
           ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jrr/repos/inkle/node_modules/ink/build/index.js from /Users/jrr/repos/inkle/node_modules/ink-big-text/dist.js not supported.
Instead change the require of index.js in /Users/jrr/repos/inkle/node_modules/ink-big-text/dist.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/jrr/repos/inkle/node_modules/ink-big-text/dist.js:5:12) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.15.0

I don't pretend to understand ESM, but I suspect ink-big-text will need some changes to remain compatible with Ink 4.

For what it's worth, here's my tsconfig:

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true,
    "noEmitOnError": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "module": "node16",
    "moduleResolution": "nodenext",
    "jsx": "react",
    "esModuleInterop": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Big Text inside `ink-box` is breaking big-text

I'm working on my first ink app, and I've found that this package does not work when surrounded by a <Box> from ink-box.