react-hook-figlet

React custom hook for figlet.js

Usage no npm install needed!

<script type="module">
  import reactHookFiglet from 'https://cdn.skypack.dev/react-hook-figlet';
</script>

README

useFiglet

A React custom hook for figlet.js

NPM JavaScript Style Guide

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

  • initialFont: FigletFont

    • Default FIGlet font

License

MIT © gongo


This hook is created using create-react-hook.