TypingFX

⚡ Customizable, smooth, and snappy typing animations for React
Animate your text like a pro — fully compatible with React 18/19, Next.js 14/15, and React Server Components.

✨ Features

• 🎯 Built for modern React (18/19) and Next.js (14/15)
• ✨ Smooth, realistic word-by-word animation
• 🔁 Step-based sequences with infinite looping
• 💅 JSX-ready — animate styled, rich text effortlessly
• 🧠 Honors prefers-reduced-motion accessibility setting
• ⚡ Hybrid CSS + JS for best performance
• 💡 Fully typed with TypeScript
• 🧩 SSR-safe and RSC-compatible
• 🚫 No runtime dependencies

🚀 Install

pnpm add typingfx

or

npm install typingfx

or

yarn add typingfx

🔧 Usage

① Import Styles

🎨 Required for typing animation and cursor styling.

In JSX (Next.js layout files recommended):

import "typingfx/dist/index.css";

Or in global CSS:

@import "typingfx/dist/index.css";

② Basic Typing Animation

import { TypeOut } from "typingfx";

export default function Example() {
  return (
    <TypeOut
      steps={["Frontend Developer.", "React Enthusiast.", "Open Source Advocate."]}
      speed={25}
      delSpeed={40}
      repeat={Infinity}
    />
  );
}

③ Single-Step Typing

Need a one-off typing effect without using steps?

export default function Example() {
  return (
    <TypeOut>
      I love {500} <strong>typingfx</strong>
    </TypeOut>
  );
}

⏱️ Use numbers inside JSX to insert pauses (in milliseconds) during typing.
➖ Negative numbers delay deletion.
🔤 Want to render the number instead? Wrap it with String() or use template literals.

④ Animate JSX & Rich Text

<TypeOut
  steps={[
    <>
      Building with <strong>React</strong>
    </>,
    <>
      Deploying on <code>Vercel</code>
    </>,
    <>
      Coding like a <span className="emoji">💻</span>
    </>,
  ]}
  speed={30}
  repeat={3}
/>

🧪 Component Animation (Beta)

TypingFX supports animating React components using a typing and deleting effect. This feature is currently in beta, and feedback is welcome.

✨ Default Behavior – Typing Animation

By default, TypingFX assumes the component is pure and attempts to extract and animate its JSX output, treating it like static content. This provides a natural typing effect as if the component was written inline.

<TypingFX>{<MyPureComponent />}</TypingFX>

This enables smooth, character-by-character typing that matches the surrounding text.

🧩 componentAnimation Prop

For components with side effects or dynamic behavior, you can control their animation using the componentAnimation prop:

<TypingFX
  componentAnimation={{
    wrapper: "div",
    props: { className: "custom-wrapper" },
  }}>
  <MyComponent />
</TypingFX>

TypingFX will wrap the component with the specified element and apply:

• Fade-in (typing): 5s
• Fade-out (deleting): 3s

This disables JSX extraction and uses a wrapper-based animation strategy.

⚠️ Server-Side Rendering (SSR) Limitation

TypingFX cannot detect components in SSR environments. Thus, by default, SSR-rendered components are treated as normal content and animated using the default typing animation.

However, you can manually mark any DOM element to be treated as a component by adding a data-tfx attribute with any truthy value:

<span data-tfx="true">Server-rendered content</span>

Combined with the componentAnimation prop, this enables custom animation support even for SSR-rendered output.

🎨 CSS Overrides

You can override the fade animation by targeting the default class names:

.tfx_component.tfx_type {
  animation: myCustomFadeIn 2s ease-in;
}

.tfx_component.tfx_del {
  animation: myCustomFadeOut 2s ease-out;
}

💬 API Feedback Welcome

We're exploring the best API design for component animation. If you have ideas or requirements, please open an issue or comment on this discussion.

💡 Tips & Tricks

⏱️ Delays & Pauses with Numbers

You can embed numbers (e.g. {1000}) directly inside JSX (steps or children) to add typing or deleting delays:

<TypeOut
  steps={[
    <>
      Hello{800}
      {-500}
    </>,
    "World!",
  ]}
/>

• {800} → pauses for 800ms while typing
• {-500} → pauses for 500ms while deleting

⚠️ Important: Numbers must be embedded directly as JSX expressions — not as strings.

If you want to display a number instead of pausing, convert it to a string:

<>I waited {String(800)} milliseconds.</>

⚠️ Memoization Matters

To prevent unintended animation restarts on re-renders, memoize your steps or children using useMemo:

const steps = useMemo(() => ["One", "Two", "Three"], []);
<TypeOut steps={steps} />;

This is especially useful in dynamic React apps or when props change frequently.

🧱 Multi-Line Typing Support

Each step can contain multiple elements like <p>, <div>, or fragments – typingfx will animate them line by line:

<TypeOut
  steps={[
    <>
      <p>Hi there</p>
      <p>Welcome to TypingFX!</p>
    </>,
    <>
      <p>Hi there</p>
      <p>TypingFX is awesome!</p>
    </>,
  ]}
/>

✅ No need to split them into separate steps – group them as one step to animate fluidly across lines.

🚫 Avoid Layout Shifts on Delays

When inserting delays between block elements, prefer placing the delay inside one block, rather than between them:

// ❌ Avoid: causes extra spacing
<>
  <p>Hi</p>
  {5000}
  <p>Hello</p>
</>

// ✅ Recommended
<>
  <p>Hi{5000}</p>
  <p>Hello</p>
</>
// or
<>
  <p>Hi</p>
  <p>{5000}Hello</p>
</>

✨ Control the Cursor

Want to hide the blinking cursor?

<TypeOut noCursor>Hello, no cursor here!</TypeOut>

🌐 Seamless RSC & Next.js Support

No extra setup needed – TypeOut is already marked as a client component.

✅ Works out of the box with Next.js 14/15 and React Server Components (RSC).

⚙️ Props

📦 Framework Compatibility

• ✅ React 16.8 — React 19
• ✅ Next.js 12 — Next.js 15
• ✅ SSR-safe (no window access during render)
• ✅ RSC-compatible (used as a client component)

❓ FAQ & Gotchas

📁 License

MPL-2.0 open-source license © Mayank Chaudhari

Please enroll in our courses or sponsor our work.

with 💖 by Mayank Kumar Chaudhari