typify-react

A lightweight and customizable React hook for creating typewriter text effects with ease. It supports typing, deleting, delays, and loop control to bring dynamic and engaging animations to your UI.

✨ Features

• Customizable Typing Speed: Control the speed of typing and deleting characters.
• Loop Support: Define how many times the animation runs, or let it loop infinitely.
• Callbacks: Hooks into key events like typing, deleting, delays, and completion.
• Lightweight: Built with modern React practices using hooks.
• TypeScript Support: Provides strong typings for better development experience.

📦 Installation

Install the package via npm or yarn:

npm install typify-react

or

yarn add typify-react

🚀 Usage

Here’s how to get started with typify-react:

import { useTypewriter } from "typify-react";

const App = () => {
  const [text, { isType, isDelay, isDelete, isDone }] = useTypewriter({
    words: ["Welcome to My App!", "This is typify-react!"],
    loop: 0, // Infinite loop
    typeSpeed: 100,
    deleteSpeed: 50,
    delaySpeed: 1500,
    onLoopDone: () => console.log("All loops completed!"),
  });

  return <h1>{text}</h1>;
};

export default App;

⚙️ Props

| Prop Name | Type | Default | Description | |--------------|----------------------------|-----------------------|--------------------------------------------------| | words | string[] | ["Hello World"] | Array of words to type. | | loop | number or boolean | 1 | Number of loops to run. 0 for infinite. | | typeSpeed | number | 80 | Speed for typing characters (ms). | | deleteSpeed| number | 50 | Speed for deleting characters (ms). | | delaySpeed | number | 1500 | Delay between typing and deleting (ms). | | onType | (count: number) => void | - | Triggered on typing with the typed word count. | | onDelete | () => void | - | Triggered on deleting. | | onDelay | () => void | - | Triggered on delay. | | onLoopDone | () => void | - | Triggered after completing all loops. |

📚 API Reference

useTypewriter

This hook returns a tuple containing:

1. text: The current text being typed or deleted.
2. TypewriterHelper: An object with the following state indicators:
   • isType: Whether the hook is currently typing.
   • isDelay: Whether it is in a delay phase.
   • isDelete: Whether it is currently deleting.
   • isDone: Whether all loops are completed.

Example

const [text, { isType, isDelay, isDelete, isDone }] = useTypewriter(...);

📋 Example Project

Clone the repository and run the example project:

git clone https://github.com/omeryaldirgan/typify-react.git
cd typify-react/example
npm install
npm start

🛠 Development

Want to contribute? Follow these steps:

1. Clone the repository:

   git clone https://github.com/omeryaldirgan/typify-react.git

2. Install dependencies:

   cd typify-react
   npm install

3. Run the dev server:

   npm run start

💬 Feedback

If you find any issues or have suggestions for improvement, please open an issue.