use-typical

Getting Started

Animated typing in ~2.6 kb 🐡 with React Hook.

Live Demo ✨ https://use-typical.vercel.app

📦 Install

yarn add use-typical

Or you can:

npm install use-typical

🚀 Usage

You can create typing animate effects by the react hook useTypical

import React from 'react';
import useTypical from 'use-typical';

export default () => {
  const ref = useTypical({
    steps: ['Hello', 1000, 'Hello world!', 500],
    loop: Infinity,
    speed: 60,
  });

  return <p ref={ref}></p>;
};

To display the blink effects, you can add the classname typingWrapper on the dom.

-<p ref={ref}></p>
+<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;
  }
}

📔 API

Hook

const ref = useTypical(options: Options);

Result

Params	Description	Type
ref	The ref of typical text wraper	React.RefObject<HTMLDocument>

Options

Params	Description	Type	Default
steps	Step array assign to the typing	Array<string, number, Function>	-
loop	The number of loop typing animation effect, Infinity	number	1
speed	The speed of typing animation effect	number	60

🔨 Contribute

Install dependencies,

$ npm i

Start the dev server,

$ npm start

Build documentation,

$ npm run docs:build

Build library via father-build,

$ npm run build

License

MIT