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.

Installation

npm i auto-linker-previewer

Usage

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

Note: To use the auto-linker package, make sure to include the CSS file in your project:

import 'auto-linker-previewer/dist/autolinker.css';

Basic example

import { autoLinker } from 'auto-linker-previewer';
import 'auto-linker-previewer/dist/autolinker.css';

const text = 'Visit https://www.chanchal.dev/ or email [email protected]. You may also find me on Twitter: @chanchal16_';
const processText = async () => {
    const result= await autoLinker(text, {newTab:true, mentionOptions: { prefix: "@", urlPrefix: "https://twitter.com/" }});
    console.log('result',result)
};
processText();

React

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

import React, { useState, useEffect } from "react";
import { autoLinker } from "auto-linker-previewer";
import 'auto-linker-previewer/dist/autolinker.css';

const ReactExample = () => {
  const [text, setText] = useState(
    "Visit https://www.chanchal.dev/ or email [email protected]. You may also find me on Twitter: @chanchal16_"
  );
  const [processedText, setProcessedText] = useState<string>("");

  useEffect(() => {
    const options: AutoLinkerOptions = {
      newTab: true,
      className: "custom-link",
      mentionOptions: { prefix: "@", urlPrefix: "https://twitter.com/" },
      linkPreview: true,
    };
    const processText = async () => {
      const result = await autoLinker(text, options);
      setProcessedText(result);
    };
    processText();
  }, [text]);

  return (
    <div>
      <h1>React AutoLinker Example</h1>
      {/* Display processed text as HTML */}
      <div dangerouslySetInnerHTML={{ __html: processedText }} />
    </div>
  );
};

export default ReactExample;

Angular

import { Component, OnInit } from '@angular/core';
import { autoLinker, AutoLinkerOptions } from 'auto-linker-previewer';
import 'auto-linker-previewer/dist/autolinker.css';

@Component({
  selector: 'app-auto-linker',
  template: `
    <div>
      <h1>Angular AutoLinker Example</h1>
      <!-- Display the processed HTML in Angular -->
      <div [innerHTML]="processedText"></div>
    </div>
  `,
  styles: [`
    .custom-link {
      color: blue;
      text-decoration: underline;
    }
  `]
})
export class AutoLinkerComponent implements OnInit {
  text = 'Visit https://www.chanchal.dev/ or email [email protected]. You may also find me on Twitter: @chanchal16_';
  processedText = '';
  async ngOnInit() {
    const options: AutoLinkerOptions = {
      newTab: true,
      className: 'custom-link',
      mentionOptions: { prefix: '@', urlPrefix: 'https://twitter.com/' },
      linkPreview: true,
    };
    this.processedText = await autoLinker(this.text, options);
  }
}

Props

| Name | Type | Description | |----------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------| | newTab | boolean | Will open the link in the new tab | | className | string | add custom css classes to the links | | mentionOptions | Object | An object to specify social handles. Consists of properties - prefix:string prefix for the mention. (eg:@) urlPrefix:string social handle url | | linkPreview | boolean | Determines whether to generate link preview or not |