JSPM

auto-linker

A utility package that automatically converts URLs, email addresses, and mentions within text into clickable hyperlinks.
View Demo

Key Features

URL Detection: Automatically detect and convert plain-text URLs into clickable links.

Email Address Detection: Identify email addresses and convert them into mailto: links.

Social Media Handles: Optionally detect and link social media handles (like Twitter handles: @username)

Link Preview: Option to generate link preview data for detected URLs.

Truncation: Ability to truncate long URLs in display text while keeping the full URL in the href.

Usage

auto-linker is compatible with all JavaScript frameworks like React, Vue, Angular, etc.

Basic example

import { autoLinker } from 'auto-linker';

const text = 'Check out https://example.com or contact me at john@example.com. You can also find me on twitter @john';
const linkedText = autoLinker(text, { newTab: true, mentionOptions: { prefix: "@", urlPrefix: "https://twitter.com/"} });
console.log(linkedText);

React

React allows you to directly insert HTML using dangerouslySetInnerHTML. You can use the auto-linker like this:

import React from 'react';
import { autoLinker } from 'auto-linker';

function App() {
  const text = "Visit https://example.com or contact john@example.com";
  const linkedText = autoLinker(text);

  return (
    <div>
      <p dangerouslySetInnerHTML={{ __html: linkedText }} />
    </div>
  );
}

export default App;

Props