https://github.com/gongo/react-hook-figlet

A React custom hook for figlet.js
https://github.com/gongo/react-hook-figlet

Last synced: about 4 hours ago
JSON representation

A React custom hook for figlet.js

• Host: GitHub
• URL: https://github.com/gongo/react-hook-figlet
• Owner: gongo
• Created: 2021-06-05T08:56:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-09T14:53:00.000Z (over 3 years ago)
• Last Synced: 2024-10-29T00:42:43.982Z (11 days ago)
• Language: TypeScript
• Homepage:
• Size: 293 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# useFiglet

A React custom hook for [figlet.js](https://github.com/patorjk/figlet.js)

[![NPM](https://img.shields.io/npm/v/react-hook-figlet.svg)](https://www.npmjs.com/package/react-hook-figlet) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```sh-session

$ # With npm

$ npm install react-hook-figlet

$ # With yarn

$ yarn add react-hook-figlet

```

## Usage

```tsx

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 (

    


      

      
{figletText}

    

  )

}

```


Example app is here [react-hook-figlet/example](./example)

## Reference

### Types

```ts

export type FigletFont = figlet.Fonts

```

Alias of `figlet.Fonts`

### API

```ts

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](https://github.com/gongo)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).