React Linkify Component

Common errors

• Error: Can't resolve 'linkifyjs' in 'your-project/node_modules/linkify-react'

  cause The peer dependency `linkifyjs` is not installed in your project.
  fix Install `linkifyjs` as a direct dependency: `npm install linkifyjs` or `yarn add linkifyjs`.

• TypeError: Linkify is not a function (or) TypeError: Cannot read properties of undefined (reading 'default')

  cause Incorrect import statement for the `Linkify` component, often trying to named import a default export or using CommonJS `require` incorrectly with an ESM default export.
  fix Use `import Linkify from 'linkify-react';` for ESM or `const Linkify = require('linkify-react');` for CommonJS (as it's a default export that works well with CJS interop).

• Hashtags are not being detected or converted into links.

  cause The `hashtag` plugin for `linkifyjs` has not been imported.
  fix Add `import 'linkifyjs/plugins/hashtag';` to your application's entry file or the component file where `Linkify` is used.

Warnings

• breaking Version 4.1.0 dropped official support for Safari 10. Users targeting this browser version might encounter compatibility issues.
  Fix: Ensure target browsers are newer than Safari 10, or consider pinning to an older linkify-react version if Safari 10 support is critical.
• gotcha The `linkifyjs` package is a peer dependency and must be installed separately alongside `linkify-react`. Failure to do so will result in runtime errors.
  Fix: Run `npm install linkifyjs linkify-react` or `yarn add linkifyjs linkify-react`.
• gotcha For specific link types like hashtags or mentions to be recognized, their corresponding plugins from `linkifyjs/plugins/` must be explicitly imported, even if not directly used in code.
  Fix: Add `import 'linkifyjs/plugins/hashtag';` or similar imports at the top level of your application or component where `Linkify` is used.
• gotcha As of v4.3.0, the package renamed its distribution files from `.cjs.js` and `.es.js` to `.cjs` and `.mjs`. While standard bundlers should handle this automatically, custom build configurations or direct imports by path might need adjustment.
  Fix: Verify that your bundler or module resolver correctly handles `.cjs` and `.mjs` extensions. For most users relying on `package.json`'s `main` and `module` fields, no action is needed.

Install

• npm install linkify-react npm
• yarn add linkify-react yarn
• pnpm add linkify-react pnpm

Imports

• Linkify
  wrong:

  import { Linkify } from 'linkify-react'; // Linkify is a default export, not named.
  const Linkify = require('linkify-react').default;

  correct:

  import Linkify from 'linkify-react';

  The Linkify component is the default export. Use direct import for ESM or `require` for CJS environments.
• LinkifyOptions
  wrong:

  import type { LinkifyOptions } from 'linkify-react';

  correct:

  import type { LinkifyOptions } from 'linkifyjs';

  Configuration options for Linkify are defined in the core `linkifyjs` package, not `linkify-react`.
• Hashtag Plugin
  wrong:

  import { hashtag } from 'linkifyjs/plugins/hashtag'; // Plugins are imported for their side effects, not as named exports.

  correct:

  import 'linkifyjs/plugins/hashtag';

  Plugins like 'hashtag' or 'mention' extend `linkifyjs` functionality via side effects and must be imported directly from the `linkifyjs/plugins/` path. They don't expose named exports.

Quickstart

Demonstrates the basic usage of the Linkify component and advanced customization options. It shows how to apply custom attributes, format link text, provide custom React components for links, handle specific link types like hashtags, and validate links before rendering.

import React from 'react';
import Linkify from 'linkify-react';
import 'linkifyjs/plugins/hashtag'; // Optional: Import plugins for additional link types

const LinkifyExample = () => {
  const textWithLinks = "Visit my website at example.com, email me at info@example.org, or check out #myproject on social media.";

  const customOptions = {
    // Customize attributes for all links
    attributes: {
      target: '_blank',
      rel: 'noopener noreferrer',
      className: 'my-custom-link'
    },
    // Format the displayed text for URLs longer than 30 characters
    format: {
      url: (value: string) => value.length > 30 ? value.substring(0, 27) + '...' : value,
    },
    // Provide a custom React component for all links
    component: ({ tagName, attributes, content }: any) => {
      const Tag = tagName; // 'a'
      return (
        <Tag {...attributes} style={{ color: 'darkgreen', fontWeight: 'bold' }}>
          {content}
        </Tag>
      );
    },
    // Render specific link types differently (e.g., hashtags)
    render: {
      hashtag: ({ tagName, content, href }: any) => (
        <a key={href} href={`https://twitter.com/hashtag/${content}`} style={{ color: 'purple' }}>
          #{content}
        </a>
      )
    },
    // Validate specific link types (e.g., only 'https' URLs)
    validate: {
      url: (value: string) => value.startsWith('https://')
    }
  };

  return (
    <div>
      <h1>Linkify React Usage Example</h1>
      <p>Original text: "{textWithLinks}"</p>
      <div style={{ border: '1px solid #eee', padding: '15px', backgroundColor: '#f9f9f9' }}>
        <h2>Default Linkify:</h2>
        <Linkify>{textWithLinks}</Linkify>
      </div>
      <div style={{ border: '1px solid #eee', padding: '15px', marginTop: '20px', backgroundColor: '#f9f9f9' }}>
        <h2>Linkify with Custom Options:</h2>
        <Linkify options={customOptions}>{textWithLinks}</Linkify>
      </div>
    </div>
  );
};

export default LinkifyExample;