better-ascii

A React component for rendering ASCII text art.

Installation

npm install better-ascii

Usage

import { Ascii } from 'better-ascii';

function App() {
  return <Ascii>Hello World</Ascii>;
}

With Font Selection

import { Ascii, fonts } from 'better-ascii';

function App() {
  return (
    <div>
      <Ascii font={fonts.ansiShadow}>Shadow</Ascii>
      <Ascii font={fonts.alpha}>Alpha</Ascii>
      <Ascii font={fonts.deltaCorpsPriest1}>Delta</Ascii>
    </div>
  );
}

With Styling

import { Ascii, fonts } from 'better-ascii';

function App() {
  return (
    <Ascii
      font={fonts.ansiShadow}
      className="text-green-400 bg-black p-4"
    >
      Styled
    </Ascii>
  );
}

API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | required | The text to render as ASCII art | | font | Font | Delta Corps Priest 1 | Font to use (import from fonts) | | className | string | undefined | CSS classes to apply | | style | CSSProperties | undefined | Inline styles (merged with defaults) | | ...props | HTMLAttributes<HTMLPreElement> | - | All standard <pre> attributes |

Available Fonts

• fonts.ansiShadow
• fonts.deltaCorpsPriest1 (default)
• fonts.alpha

Accessibility

• role="img" with aria-label on rendered output
• aria-busy="true" during loading
• role="alert" for errors

Next.js

Works with the App Router out of the box — "use client" is included in the bundle.

Development

npm install
npm run build
npm run dev   # watch mode

License

MIT