LinkLens – A Lightweight React Package for Link Detection & Previews

Hey React developers! 👋 Tired of manually handling URLs, hashtags, and mentions in chat apps, blogs, or social media platforms?

Meet LinkLens, a lightweight React npm package that makes link detection, rich previews, and interactive content effortless. In this 2025-ready tutorial, we’ll explore how to enhance your app’s functionality, interactivity, and user engagement with LinkLens.

🔗 Why LinkLens is a Game-Changer

Building React chat apps, comment systems, forums, or social feeds often involves dynamic content like:

• URLs
• Mentions (@username)
• Hashtags (#topic)

Manually handling these with regex or fetching metadata for previews is tedious and error-prone.

LinkLens automates this, saving you time while improving:

• SEO: Crawlers can index links, mentions, and hashtags efficiently.
• Social Media Sharing: Rich previews with thumbnails, titles, and descriptions.
• User Experience: Hover previews, interactive links, and custom styling.

Features Include:

• Automatic detection of URLs, mentions, hashtags, and custom patterns.
• Rich previews compatible with Open Graph and Twitter Card protocols.
• Hover previews for subtle interactivity.
• Customizable link colors, container classes, and HTML tags.
• Accessibility support (ARIA-compliant).
• Fully optimized for React 18+ SPAs.

Check out the source code: GitHub

Install from npm: LinkLens

📦 Installation

npm install linklens --force

The --force flag ensures smooth installation in React 18+ projects even with minor dependency conflicts.

Once installed, you’re ready to enhance link handling, SEO, and social media previews in your app. ✨

Example 1: Highlighting Links for Better SEO

Automatically detect and highlight URLs in text:

"use client";
import LinkLens from "linklens";

export default function SimpleLinkHighlight() {
  return (
    <main className="p-4">
      <LinkLens
        content="Check out my portfolio at https://github.com/DeveloperAromal"
        highlightLink={true}
      />
    </main>
  );
}

Explanation:

• content: The text to parse for links, hashtags, or mentions.
• highlightLink: Makes detected URLs clickable and search engine crawlable.
• Use case: Chat messages, blog comments, or social feeds.

Example 2: Styling Links to Match Your Brand

Customize link colors for branding:

<LinkLens
  content="Follow my journey at https://github.com/DeveloperAromal"
  highlightLink={true}
  linkColor="#ff4500" // Vibrant orange
/>

Explanation:

• linkColor: Any CSS color for link styling.
• Use case: Branded chat apps, social media feeds, or CMS platforms.

Example 3: Rich Link Previews for Social Media Sharing

Create Twitter-style previews:

<LinkLens
  content="Loving this article: https://github.com/DeveloperAromal"
  previewCard={true}
/>

Explanation:

• previewCard: Displays a card with thumbnail, title, and description.
• Use case: Forums, messaging apps, news feeds.

Optimized for Open Graph/Twitter Card protocols, boosting shareability and SEO.

Example 4: Hover Previews for Subtle Interactivity

Enable previews only on hover:

<LinkLens
  content="Hover over this link: https://github.com/DeveloperAromal"
  hoverPreview={true}
/>

Explanation:

• hoverPreview: Displays metadata on hover instead of always showing a card.
• Use case: Forums or chat apps with limited space.

Improves user engagement while keeping the interface clean.

Example 5: Detecting Mentions and Hashtags with Custom Regex

Highlight mentions and hashtags:

<LinkLens
  content="Mentioned @aromal in a post"
  customRegex={true}
  pattern="@\\w+|#\\w+"
  tag="span"
  customTagColor="purple"
/>

Explanation:

• customRegex: Enables custom regex detection.
• pattern: Regex for matching @username or #topic.
• tag: HTML tag wrapping matched text.
• customTagColor: Color for highlighted text.
• Use case: Social media clones or chat apps.

Improves content interactivity and SEO visibility.

Example 6: Styling the Container for Seamless Integration

<LinkLens
  content="Check this out: https://github.com/DeveloperAromal"
  classname="p-4 bg-gray-100 rounded-lg shadow-md"
/>

Explanation:

• classname: Add Tailwind or custom CSS classes to style the container.
• Use case: Chat bubbles, cards, or modals.

Explanation:

• Combines link highlighting, rich previews, hover previews, and hashtag detection.
• Use case: Social feeds or messaging apps with full-featured interactive content.

LinkLens Props Reference

Prop	Type	Default	Description
content	string	""	Text containing URLs, mentions, or hashtags
highlightLink	boolean	true	Highlights links for SEO-friendly URLs
linkColor	string	"blue"	CSS color for highlighted links
previewCard	boolean	false	Shows Open Graph/Twitter Card previews
hoverPreview	boolean	false	Displays preview tooltip on hover
customRegex	boolean	false	Enables custom regex for mentions/hashtags
pattern	string	""	Regex for custom matches (e.g., @username, #topic)
tag	string	"a"	HTML tag for matched content
customTagColor	string	""	Color for custom-matched text
classname	string	""	CSS classes for container styling

❤️ Why I Built LinkLens

• Lightweight: Keeps bundle size small for faster load times.
• Flexible: Customize links, previews, and regex patterns.
• Accessible: ARIA support for inclusive apps.
• React 18+ Ready: Optimized for modern SPAs.

Links:

• npm: LinkLens
• GitHub: Source Code

🚀 Ready to Supercharge Your React App?

Install LinkLens today and enhance your React apps with interactive links, rich previews, and seamless user experiences. Build chat apps, blogs, forums, and social feeds that are dynamic, accessible, and highly engaging.

Happy coding! ✨

Comments

[Muhammed Sabith]

woooaah ! amazing