Muhammed Sabith

Posted on Aug 30

Create Awesome Link Effect

#npm #programming #javascript #webdev

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 for React SEO

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.

Polished UI enhances UX and reduces bounce rate, indirectly improving SEO.

Example 7: Combining Features for Maximum Impact

<LinkLens
  content="Loving this site https://github.com/DeveloperAromal #ReactJS"
  highlightLink={true}
  linkColor="teal"
  previewCard={true}
  hoverPreview={true}
  customRegex={true}
  pattern="#\\w+"
  customTagColor="blue"
/>

Explanation:

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

Maximizes user engagement and search visibility, key for 2025 SEO trends.

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