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