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

| 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