How to use the linkify-it function in linkify-it

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,

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 = {

import React from 'react';

import LinkifyIt from 'linkify-it';

import { RenderTextCallback } from '../../types/Util';
import { isLinkSneaky } from '../../../js/modules/link_previews';

const linkify = LinkifyIt();

interface Props {
  text: string;
  /** Allows you to customize now non-links are rendered. Simplest is just a <span>. */
  renderNonLink?: RenderTextCallback;
}

const SUPPORTED_PROTOCOLS = /^(http|https):/i;

export class Linkify extends React.Component {
  public static defaultProps: Partial = {
    renderNonLink: ({ text }) =&gt; text,
  };

  public render() {
    const { text, renderNonLink } = this.props;</span>

import { useNavigation } from '@berty-tech/navigation'
import { useTranslation } from 'react-i18next'
import beapi from '@berty-tech/api'
import { useMsgrContext, useConvInteractions, useClient } from '@berty-tech/store/hooks'
import { getSource } from '@berty-tech/components/utils'
import RNFS from 'react-native-fs'
import { timeFormat } from '@berty-tech/components/helpers'
const initialLayout = { width: Dimensions.get('window').width }
import { TabView, SceneMap } from 'react-native-tab-view'
import tlds from 'tlds'
import linkifyFn from 'linkify-it'
import Hyperlink from 'react-native-hyperlink'

import { isBertyDeepLink } from '@berty-tech/components/chat/message/UserMessageComponents'

const linkify = linkifyFn().tlds(tlds, true)

export const SharedMedias: React.FC<{ route: { params: { convPk: string } } }> = ({
	route: {
		params: { convPk },
	},
}) => {
	const [{ flex, margin, row, text, padding, border, background, color }] = useStyles()
	const { goBack, navigate } = useNavigation()
	const { t }: { t: any } = useTranslation()
	const [activeIndex, setActiveIndex] = useState(0)
	const { protocolClient } = useMsgrContext()
	const [images, setImages] = useState([])
	const client = useClient()

	const messages = useConvInteractions(convPk).filter(
		(msg) =>

/*
 * Copyright (c) 2016, vace.nz (https://github.com/vacenz)
 *
 * License: MIT
 */

import {extractHashtagsWithIndices} from './hashtag'
import linkifyIt from 'linkify-it'
import tlds from 'tlds'

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

export function createTypeStrategy (type) {
  return (contentBlock, callback, contentState) => {
    contentBlock.findEntityRanges(
      (character) => {
        const entityKey = character.getEntity()
        return (
          entityKey !== null &&
          contentState.getEntity(entityKey).getType() === type
        )
      },
      callback
    )
  }
}