react-typing-hook

Animated typing in ~2.6 kb 🐡 with React Hook.

Preview in CodeSandBox →

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

Name	Type	Default	Description
ref	React.RefObject<HTMLDocument>	-	The ref of typical text wraper
steps	Array<string, number, Function>	-	Step array assign to the typing
loop	number	1	The number of loop typing animation effect, Infinity
speed	number	60	The speed of typing animation effect

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