How to use linkify-it - 10 common examples

let hexArr = hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
  return `rgba(${hexArr[0]},${hexArr[1]},${hexArr[2]},`;
}

export const rgbaColors = {
  primary: hexToRGBArray(colors.primary),
  secondary: hexToRGBArray(colors.secondary),
  dark_gray: hexToRGBArray(colors.dark_gray),
  light_gray: hexToRGBArray(colors.light_gray),
  exlight_gray: hexToRGBArray(colors.exlight_gray),
  exexlight_gray: hexToRGBArray(colors.exexlight_gray),
  white: hexToRGBArray(colors.white)
};

import Hyperlink from "react-native-hyperlink";
const customLinkify = require("linkify-it")()
  .add("@", {
    validate: function(text, pos, self) {
      var tail = text.slice(pos);

      if (!self.re.twitter) {
        self.re.twitter = new RegExp(
          "^([a-zA-Z0-9_]){1,15}(?!_)(?=$|" + self.re.src_ZPCc + ")"
        );
      }
      if (self.re.twitter.test(tail)) {
        // Linkifier allows punctuation chars before prefix,
        // but we additionally disable `@` ("@@mention" is invalid)
        if (pos >= 2 && tail[pos - 2] === "@") {
          return false;
        }
        return tail.match(self.re.twitter)[0].length;

import React from "react";
// @ts-ignore
import Hyperlink from "react-native-hyperlink";
import {colors} from "./theme";
import {Text} from "native-base";

const first_linkify = require("linkify-it")()
    .add("@", {
        validate: function(text:any, pos:any, self:any) {
            var tail = text.slice(pos);

            if (!self.re.twitter) {
                self.re.twitter = new RegExp(
                    "^([a-zA-Z0-9_]){1,15}(?!_)(?=$|" + self.re.src_ZPCc + ")"
                );
            }
            if (self.re.twitter.test(tail)) {

                if (pos >= 2 && tail[pos - 2] === "@") {
                    return false;
                }
                return tail.match(self.re.twitter)[0].length;
            }

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import linkifyIt from 'linkify-it';
import modifier from '../modifiers/addLink';
import styles from './styles.css';

const linkify = linkifyIt();

export default class LinkAdd extends Component {
  // Start the popover closed
  state = {
    url: '',
    open: false,
    linkError: false
  };

  // When the popover is open and users click anywhere on the page,
  // the popover should close
  componentDidMount() {
    document.addEventListener('click', this.closePopover);
  }

  componentWillUnmount() {

import React, { Component } from 'react'
import linkifyIt from 'linkify-it'
import tlds from 'tlds'

import styles from './Link.scss'

const linkify = linkifyIt()
linkify.tlds(tlds)

// The component we render when we encounter a hyperlink in the text
export default class Link extends Component {
  constructor(props) {
    super(props)

    this.state = {
      editingLink: false
    }
    this.lastDecoratedText = null
  }

  componentDidMount() {
    const { contentState, entityKey, decoratedText } = this.props
    this.lastDecoratedText = decoratedText

setLinkUrl(command, url) {
      const links = linkify().match(url)
      if (links) {
        // add valid link
        command({
          href: links.pop().url,
        })
        this.hideLinkMenu()
        this.editor.focus()
      } else if (!url) {
        // remove link
        command({ href: null })
      }
    },
    clear() {

import React, { Component } from 'react';
import clsx from 'clsx';
import linkifyIt from 'linkify-it';
import tlds from 'tlds';

const linkify = linkifyIt();
linkify.tlds(tlds);

// The component we render when we encounter a hyperlink in the text
export default class Link extends Component {
  render() {
    const {
      decoratedText = '',
      theme = {},
      target = '_self',
      rel = 'noreferrer noopener',
      className,
      component,
      dir, // eslint-disable-line no-unused-vars
      entityKey, // eslint-disable-line no-unused-vars
      getEditorState, // eslint-disable-line no-unused-vars
      offsetKey, // eslint-disable-line no-unused-vars

import { decoratedBlocksToHTML } from '../utils/Blocks';
import linkifyit from 'linkify-it';
import React from 'react';

const linkify = linkifyit();
linkify.add('> ', {
  validate: function (text, pos, self) {
    const tail = text.slice(pos);
    const schemaLength = tail.indexOf('/');
    const linkLength = linkify.testSchemaAt(tail.slice(schemaLength), 'http:', 0);
    return linkLength ? linkLength + schemaLength : 0;
  },
});

export default (config = {}) => {
  return {
    blockToHTML: decoratedBlocksToHTML(strategy, Component),
    decorators: [
      {
        strategy,
        component: Component,

"use strict";

const LinkifyIt = require("linkify-it");

LinkifyIt.prototype.normalize = function normalize(match) {
	if (!match.schema) {
		match.schema = "http:";
		match.url = "http://" + match.url;
	}

	if (match.schema === "//") {
		match.schema = "http:";
		match.url = "http:" + match.url;
	}

	if (match.schema === "mailto:" && !/^mailto:/i.test(match.url)) {
		match.url = "mailto:" + match.url;
	}
};

const linkify = LinkifyIt()

validateLinks() {
    const linkify = new LinkifyIt();

    let success = true;

    let links = this.state.links ? this.state.links.slice(0) : [];
    links = links.filter(link => !!link.url.trim());

    links.forEach((item_) => {
      const item = item_;
      const url = linkify.match(item.url);
      if (Array.isArray(url) && url[0] && url[0].url) {
        item.url = url[0].url;
      } else {
        item.error = this.props.intl.formatMessage(messages.invalidLink);
        success = false;
      }
    });

import React from 'react'
import ReactDOM from 'react-dom'
import {EditorState, RichUtils} from 'draft-js'
import addImage from 'draft-js-image-plugin/lib/modifiers/addImage'
import linkifyIt from 'linkify-it'
import tlds from 'tlds'
import EditorIcons from './EditorIcons'
import Alert from 'react-s-alert'

const linkify = linkifyIt()
linkify.tlds(tlds)

const theme = {
  modalStyles: {
    modalWrapper: 'modalWrapper',
    modalInput: 'modalInput',
    modalButton: 'modalButton',
    modalButtonWrapper: 'modalButtonWrapper',
    modalError: 'modalError'
  }
}

class LinkModal extends React.Component {
  constructor (props) {
    super(props)
    this.state = {