TypingFX

!npm bundle size

> ⚡ 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
- ⚡ Smarter performance: animation pauses 💤 when the tab loses focus — saving CPU and improving battery life without breaking the flow.
- 🎨 Fully customizable cursor with auto-blink
- 🔁 Infinite/controlled looping
- 💡 Fully typed with TypeScript
- 🧩 SSR-safe and RSC-compatible

---

🚀 Install

``bash
pnpm add typingfx
`

_or_

`bash
npm install typingfx
`

_or_

`bash
yarn add typingfx
`

---

🔧 Usage

$3

> 🎨 Required for typing animation and cursor styling.

In JSX (Next.js layout files recommended):

`tsx
import "typingfx/dist/index.css";
`

Or in global CSS:

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

---

$3

`tsx
import { TypeOut } from "typingfx";

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

---

$3

Need a one-off typing effect without using steps?

`tsx
export default function Example() {
return (

I love {500} typingfx

);
}
`

> ⏱️ 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.

---

$3

`tsx
steps={[
<>
Building with React
,
<>
Deploying on Vercel
,
<>
Coding like a 💻
,
]}
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.

$3

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.

`tsx
{}
`

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

$3

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

`tsx
componentAnimation={{
wrapper: "div",
props: { className: "custom-wrapper" },
}}>


`

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.

$3

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:

`html
Server-rendered content
`

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

$3

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

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

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

---

$3

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

$3

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

`tsx
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:

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

---

$3

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

~~const steps = useMemo(() => ["One", "Two", "Three"], []);~~

TypeOut is memoized by default to prevent unwanted animation restarts and infinite loops.

`tsx

`

> 🔁 It ignores all prop changes after first render, including paused, speed, etc.

- 🧊 Props are frozen on mount
- 🧠 Re-renders won't restart animation
- ✅ To re-run animation with new steps, change the key to remount

`tsx

`

---

$3

Want to update props on the fly (e.g., pause/resume, adjust speed) without triggering full React re-renders or loop traps?

Use the useUpdate() hook with double parentheses:

`ts
import { useUpdate } from "typeout";

export function Demo() {
const [paused, setPaused] = useUpdate("demo")(state => [state.paused, state.setPaused]);
// if you want to update props globally do not pass any id -> useUpdate()(state => [...])
return (


> 🎯 useUpdate() returns an isolated reactive store per id. These updates:
>
> - Take effect immediately
> - Don’t rely on props or re-renders
> - Work perfectly with interactive controls

---

$3

- ⚠️ steps cannot be updated dynamically — changing them requires a remount via a new key.
- 💥 remounting via key will kill the current animation and start new one.
- ✅ All other animation props are supported via useUpdate().

---

$3

| Setter | Description |
| ------------------------- | -------------------------------------- |
| setSpeed(speed) | Typing speed (chars/sec) |
| setDelSpeed(delSpeed) | Deletion speed (chars/sec) |
| setNoCursor(boolean) | Toggle cursor visibility |
| setNoCursorAfterAnimEnd | Hide cursor after animation ends |
| setRepeat(count) | How many times to repeat the animation |
| setForce(boolean) | Override user’s reduced motion setting |
| setPaused(boolean) | Pause or resume |
| setComponentAnimation() | Update animation for custom components |

> ℹ️ These updates are instance-local, fast, and non-intrusive.
> Use the storeId prop to group/manage the animation props across TypeOut instances.

---

$3

Each step can contain multiple elements like

,