Linkify

Code

import { UserText, BookmarkButton } from "@fadymondy/nasaq/web";export function Example({ message }: { message: string }) {  return (    <div className="flex items-start gap-2">      <UserText block lines={3} linkify>{message}</UserText>      <BookmarkButton onSavedChange={async (saved) => { await save(saved); }} />    </div>  );}

Utilities · beta

Live examples and controls: Linkify in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/text-utilities.json

Seven small parts for text people wrote. Linkify turns http, https, www and email addresses into links. UserText isolates a name or message so its direction never scrambles the sentence around it. TranslatableText toggles between the original and a translation. ScrollFade fades the edge of a sideways-scrolling row. BookmarkButton saves optimistically. ProgressiveReveal and ProgressiveList show more on demand.

When to useCopy Anchor Link

• Chat messages, comments, notes and titles that may contain links and either script: UserText with linkify.
• A toggle for machine translation: TranslatableText.
• A chip row or tab row wider than its container: ScrollFade.

When not to useCopy Anchor Link

• Rich text or Markdown: render it with a sanitising renderer. Linkify only scans plain strings and never parses HTML.

ImportCopy Anchor Link

import { Linkify, UserText, TranslatableText, ScrollFade, BookmarkButton, ProgressiveReveal, ProgressiveList } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { UserText, BookmarkButton } from "@fadymondy/nasaq/web";

export function Example({ message }: { message: string }) {
  return (
    <div className="flex items-start gap-2">
      <UserText block lines={3} linkify>{message}</UserText>
      <BookmarkButton onSavedChange={async (saved) => { await save(saved); }} />
    </div>
  );
}

APICopy Anchor Link

All take labels (TextUtilitiesLabels) to override the en and ar strings. Pure helpers with no React are also exported: linkifyText, linkifyTrim, scrollFadeState, scrollFadeMask, progressiveNextCount, progressiveRemaining.

AccessibilityCopy Anchor Link

• Links are real anchors with rel="noopener noreferrer".
• ScrollFade is a labelled, focusable region while it scrolls, so it can be moved with the arrow keys.
• BookmarkButton uses aria-pressed and a polite live region for saved, removed and failed.
• ProgressiveReveal drives aria-expanded on a real button.

RTL & i18nCopy Anchor Link

URLs and emails are left to right inside Arabic text. ScrollFade reads the computed direction and uses the absolute scroll offset, so the start fade sits on the right in Arabic. Strings are en and ar.

Styling & tokensCopy Anchor Link

Semantic tokens only. Extend with className, linkClassName and contentClassName.

Do / Don'tCopy Anchor Link

• Do pass plain strings to Linkify and UserText.
• Do not use dangerouslySetInnerHTML to add links.
• Do not link bare domains: people write "file.txt" and "e.g".

RelatedCopy Anchor Link

• BidiText
• CopyButton

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-utilities-text-utilities--docs