useFiglet

A React custom hook for figlet.js

Install

$ # With npm
$ npm install react-hook-figlet

$ # With yarn
$ yarn add react-hook-figlet

Usage

import React, { useEffect, useState } from 'react'

import { useFiglet } from 'react-hook-figlet'

export const App: React.VFC = () => {
  const [text, setText] = useState('')
  const [figletText, setSourceText] = useFiglet()

  const handleChange = (e) => {
    setText(e.target.value)
  }

  useEffect(() => {
    setSourceText(text)
  }, [text])

  return (
    <div>
      <textarea name="sourceText" value={text} onChange={handleChange} />
      <pre>{figletText}</pre>
    </div>
  )
}

Example app is here react-hook-figlet/example

Reference

Types

export type FigletFont = figlet.Fonts

Alias of figlet.Fonts

API

const [figletText, setSourceText, setFigletFont] = useFiglet(initialFont);

• figletText: string

  • The current ASCII art that created from source text (set in setSourceText()) based on the FIGlet font (specified in setFigletFont() or initialFont).

• setSourceText: (text: string) => void

  • Set source text

• setFigletFont: (text: FigletFont) => void

  • Set FIGlet font
  • Font list

• initialFont: FigletFont

  • Default FIGlet font

License

MIT © gongo

This hook is created using create-react-hook.