next-text-loader

A simple Next.js loader that lets you easily load and render text content with custom styling and behaviors. Useful for highlighting, formatting, or embedding text blocks inside your Next.js app.

📦 Installation

npm install next-text-loader

🚀 Usage

Import into your Next.js component

'use client'

import { TextLoader } from "next-text-loader"

export default function Page() {
  return (
    <div className="p-6">
      <TextLoader 
        text="Hello World"
        fontSize={48}
        color="#FF5733"
        duration={3}
        direction="leftToRight"
        strokeColor="#222"
      />
    </div>
  )
}

Props

| Prop | Type | Default | Description | |-------------|--------------------|-------------|-----------------------------------------------------------------------------| | text | string | required| The text content to animate. | | fontSize | number | 16 | Font size of the text (in pixels). | | color | string | #000000 | Text color. | | duration | number | 2 | Duration of the animation (in seconds). | | direction | Direction | "left-to-right" | Direction of animation ("left-to-right", "right-to-left", "top-to-bottom", "bottom-to-top"). | | strokeColor| string | transparent | Stroke (outline) color for the text. | | strokeWidth| number | 0 | Width of the stroke (in pixels). | | fontWeight| number \| string | 400 | Font weight (e.g., 400, 700, "bold"). | | fontFamily| string | sans-serif| Font family to use. | | className | string | "" | Custom CSS class for styling. |

This will render Next.js and amazing with automatic highlight styling.

✨ Features

• ✅ Plug-and-play with Next.js 13+ (App Router)
• ✅ Works with Tailwind CSS or plain CSS
• ✅ Built-in typing animation (optional)
• ✅ Highlight words dynamically
• ✅ SSR & Client-safe

📚 Why use this?

Instead of manually writing typing animations, highlights, or custom text logic every time in Next.js, next-text-loader gives you a clean, reusable component for text rendering.

📄 License

MIT