README
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 insetFigletFont()
orinitialFont
).
- The current ASCII art that created from source text (set in
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.