@tehlordvortex/react-typewriter-hook

react-typewriter-hook

⌨️ Use react hooks for typing effect easily

Original

See here

Sample

Install

npm i react-typewriter-hook --save

Example

View example at codesandbox

Usage

// useTypewriter will do these things
// Once Word changed, typewritter will automatically erase last word
// Then type down new word
import useTypewriter from "react-typewriter-hook"

function MagicWriter(word) {
  const typing = useTypewriter(word)
  return typing
}

What happens after call useTypewriter hook

• Typewriter accept the word, ready to write
• Typewriter write down your word and waiting for the word change
• Typewriter once accept the new word, it erases the last word, and write down next

Options

useTypewriter supports some optional configuration options. Use them as follows:

const typing = useTypewrite(word, {
  duration: 1000,
  // etc
})

Option	Type	Description	Default Value
interval	number	The interval between each 'stroke' of a letter, in milliseconds. Overidden by duration if present	A random number
duration	number	The total duration to spend typing, in milliseconds. If provided, the duration is evenly divided between the total number of letters in the provided string. Overrides interval