react-hook-figlet v1.0.2

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](https://github.com/patorjk/figlet.js/tree/master/fonts)

• initialFont: FigletFont

  	* Default FIGlet font

License

MIT © gongo

This hook is created using create-react-hook.