Doesn't work with react

[Rishi Mukherjee]

My App.tsx's constructor looks like the following in my react app

constructor() {
    super();
    figlet('Sezzle', 'Standard', function(err, data) {
      if (err) {
          console.log('Something went wrong...');
          console.dir(err);
          return;
      }
      console.log(data);
    });
  }

But the output in the console is

Error: FIGlet header contains invalid values.
    at Function.me.parseFont (eval at ./node_modules/figlet/lib/figlet.js (http://localhost:3000/main.js:969:1), <anonymous>:842:19)
    at eval (eval at ./node_modules/figlet/lib/figlet.js (http://localhost:3000/main.js:969:1), <anonymous>:951:31)
    at <anonymous>

I logged in the node module's parseFont function and I see that the headerData looks like this:
["<!doctype", "html>"] which is why the opts in the function is not being filled.

Please help.

[Michael Cook]

Why was this closed?

[Michael Cook]

It is sort of possible, if you put the fonts folder into the public directory of your app and include figlet.js locally - commenting out the me.preloadFonts function.

[patorjk]

I just started learning react recently, going to re-open this.

[Ivan Lartsov]

I've found a solution, but I'm coding in Vue, I think i doesn't matters

1. Put a needed front to your public directory
   
2. In app root (when app starts) use figlet.defaults

import figlet from "figlet";
...
figlet.defaults({fontPath: window.location.origin + "/assets/ascii-fonts"});

3. Then just code! But you can use only asyncronous callback-version

	figlet.text(this.$data.text, {
		font: "ANSI Shadow",
		horizontalLayout: "default",
		verticalLayout: "default"
	}, (error, renderedText) => {
		this.$data.renderedText = renderedText;
	});

[pwketankulkarni]

Application is created using create-react-app
step-1 public/ascii-fonts/ANSI shadow.
font from here https://github.com/xero/figlet-fonts/blob/master/ANSI%20Shadow.flf
step-2

import React, { Component } from "react";
import { connect } from "react-redux";
import { loginUser } from "../../store/actions/auth";
import figlet from "figlet";

figlet.defaults({
  fontPath: ".../../../public/ascii-fonts"
});

class Login1 extends Component {
  constructor() {
    super();
    iglet("Hello World!!", function(err, data) {
      if (err) {
        console.log("Something went wrong...");
        console.dir(err);
        return;
      }
      console.log(data);
    });
    this.state = {
      data: {
        usrname: "",
        password: "",
        role: ""
      }
    };
  }

output -
Error: FIGlet header contains invalid values.
at Function.me.parseFont (figlet.js:1028)
at figlet.js:1145

[patorjk]

The solution lis355 gave works for me in React. The error you're getting occurs when the parseFont function is handed invalid data. For front-end code, it'll see if the font is cached, and if not, make an ajax call to fetch the font and then pass that data to the parseFont function. I would look in your dev tools to see what is returning from the font request.

The trick is to make the font available for via an ajax request, and then set the fontPath variable equal to the path to the font.

[patorjk]

For apps that use webpack, I've added a directory of importable-fonts, they can be used like this:

import figlet from 'figlet';
import standard from 'figlet/importable-fonts/Standard.js'

figlet.parseFont('Standard', standard);

figlet.text('test', {
    font: 'Standard',
}, function(err, data) {
    console.log(data);
});

It seems to work well for me so far, I'm still doing testing on it so I haven't publicly documented this (though the importable-fonts are in the latest npm release), but this will most likely be the best way to use the library with React.

[Michael J. Ryan]

This is probably a better example for a react component, using hooks... Could probably be expanded for a more thorough usage.

// Figlet.jsx
import React, { useEffect, useState } from 'react';
import stringify from 'json-stringify-safe';
import figlet from 'figlet';
import standard from 'figlet/importable-fonts/Standard.js'

figlet.parseFont('Standard', standard);

export default function Figlet({ text, font = 'Standard', ...props }) {
  const [ascii, setAscii] = useState('');

  useEffect(() => {
    figlet.text(text, { font }, (err, data) => {
      if (err) return console.error(err);
      setAscii(data);
    })
  }, [text, font, stringify(props)]);

  return <pre {...props}>{ascii}</pre>
}

Usage:

import Figlet from './Figlet.jsx';
...
  <Figlet text="My Text" />

Can pass additional props such as className or style

[patorjk]

@tracker1 that is neat example! If you wanted to submit a PR to the README.md for this repo with it, I'd accept it.