react-typing-hook v1.0.10

react-typing-hook

Animated typing in ~400 bytes 🐡 of React Hook.

Install

yarn add react-typing-hook

or

npm install react-typing-hook

Usage

Type some animate text on the web.

import useTyping from 'react-typing-hook'

function App() {

  const ref = React.useRef(null);
  
  useTyping(ref, {
    steps: ['Hello', 1000, 'Hello world!', 500],
    loop: Infinity,
    speed: 60
  })
  
  return <p ref={ref}></p>
  // <p>Hello</p>
  // ... 1000ms
  // <p>Hello Hello</p>
  // ... 500ms
  // <p>Hello</p>
}

API

Add the classname on the dom.

<p ref={ref} className="typingWrapper"></p>

Such as a blink cursor style like this.

.typingWrapper::after {
  content: "|";
  animation: blink 1s infinite step-start;
}

@keyframes blink {
  50% { opacity: 0; }
}

Contributing

yarn install

Compiles and hot-reloads for development

yarn start

Compiles and minifies for production

yarn build

LICENSE

MIT