react-ascii-text

React ASCII Text

##

This library provides a React hook to render or animate ASCII text art using Figlet fonts.

DEMO

$3

``
npm install react-ascii-text
````

Usage

Figlet fonts are included in the package and can be imported. Full list of fonts along with UI to try them out can be found here.

Note that the font names are converted to camelCasing, omitting spaces and hyphens to allow use as ES modules. This is to allow dynamic import of font and bundlers to only include the desired one in your project code.

| Font name| Import|
| ------------- | ------------- |
|1Row|import { oneRow } from 'react-ascii-text|
|3-D|import { threeD } from 'react-ascii-text'|
|5 Line Oblique|import { fiveLineOblique } from 'react-ascii-text'|
|Big Money-sw|import { bigMoneySw } from 'react-ascii-text'|
etc.

$3

Passing a single string will render the text in a Figlet font.

`javascript
import { useAsciiText, alligator } from 'react-ascii-text';

function MyComponent() {
const asciiTextRef = useAsciiText({
font: alligator,
text: "Hello, World!",
});

return

;
}
````

$3

Pass an array of strings to animate a transition between them.

`javascript
import { useAsciiText, alligator } from 'react-ascii-text';

function MyComponent() {
const asciiTextRef = useAsciiText({
animationCharacters: "▒░█",
animationCharacterSpacing: 1,
animationDelay: 2000,
animationDirection: "down",
animationInterval: 100,
animationLoop: true,
animationSpeed: 30,
font: alligator,
text: ["REACT", "ASCII", "TEXT"],
});

return

;
}
````

$3

- animationDirection (optional, default: "horizontal"): Specifies the direction of the text animation. Possible are "down", "up", "left", "right", "horizontal", and "vertical".
- animationCharacters (optional, default: '0123456789'): Characters that replace the rendered text in the animation.
- animationCharacterSpacing (optional, default: 1): The spacing between animation characters.
- animationDelay (optional, default: 500): The delay before the animation starts in ms.
- animationInterval (optional, default: 1000): The interval (in milliseconds) between animations.
- animationIteration (optional, default: 1): The number of times the animation should repeat.
- animationLoop (optional, default: true): Whether the animation should loop indefinitely.
- animationSpeed (optional, default: 20): The speed of the animation, affecting how quickly frames transition.
- fadeInOnly (optional, default: false): Whether the animation should only fade in.
- fadeOutOnly (optional, default: false): Whether the animation should only fade out.
- font (optional, default: Slant): The font to be used for rendering the ASCII text.
- isAnimated (optional, default: true): Whether the text should be animated.
- isPaused (optional, default: false): Determines whether the animation is initially paused.
- text` (optional, default: ["React", "ASCII", "Text"]): The ASCII text to be animated. It can be a single string or an array of strings to transition animations between strings.

$3

MIT