react-typing-hook

Animated typing in ~400 bytes 🐡 of React Hook.

Usage no npm install needed!

<script type="module">
  import reactTypingHook from 'https://cdn.skypack.dev/react-typing-hook';
</script>

README

react-typing-hook

Animated typing in ~400 bytes 🐡 of React Hook.

Storybook lerna GitHub GitHub Workflow Status (branch)

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