{"id":11240,"library":"linkify-react","title":"React Linkify Component","description":"linkify-react is a React component that provides an interface to the underlying linkifyjs library, enabling the automatic detection and conversion of URLs, email addresses, and other specified patterns (such as hashtags via plugins) within text content into clickable HTML `<a>` elements. The current stable version is `4.3.2`. This package is actively maintained, with frequent patch and minor releases, often in close alignment with updates to the core `linkifyjs` library. A key differentiator is its seamless integration into React applications, allowing developers to declaratively render linkified text. It offers extensive customization options for link behavior, attributes, and rendered element types, abstracting away direct DOM manipulation. It serves as a user-friendly wrapper over `linkifyjs` to handle the complexities of parsing and rendering links within a React component tree.","status":"active","version":"4.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/nfrasser/linkifyjs","tags":["javascript","link","autolink","url","email","react"],"install":[{"cmd":"npm install linkify-react","lang":"bash","label":"npm"},{"cmd":"yarn add linkify-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add linkify-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core link detection logic; required peer dependency.","package":"linkifyjs","optional":false},{"reason":"Required for React component functionality.","package":"react","optional":false}],"imports":[{"note":"The Linkify component is the default export. Use direct import for ESM or `require` for CJS environments.","wrong":"import { Linkify } from 'linkify-react'; // Linkify is a default export, not named.\nconst Linkify = require('linkify-react').default;","symbol":"Linkify","correct":"import Linkify from 'linkify-react';"},{"note":"Configuration options for Linkify are defined in the core `linkifyjs` package, not `linkify-react`.","wrong":"import type { LinkifyOptions } from 'linkify-react';","symbol":"LinkifyOptions","correct":"import type { LinkifyOptions } from 'linkifyjs';"},{"note":"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.","wrong":"import { hashtag } from 'linkifyjs/plugins/hashtag'; // Plugins are imported for their side effects, not as named exports.","symbol":"Hashtag Plugin","correct":"import 'linkifyjs/plugins/hashtag';"}],"quickstart":{"code":"import React from 'react';\nimport Linkify from 'linkify-react';\nimport 'linkifyjs/plugins/hashtag'; // Optional: Import plugins for additional link types\n\nconst LinkifyExample = () => {\n  const textWithLinks = \"Visit my website at example.com, email me at info@example.org, or check out #myproject on social media.\";\n\n  const customOptions = {\n    // Customize attributes for all links\n    attributes: {\n      target: '_blank',\n      rel: 'noopener noreferrer',\n      className: 'my-custom-link'\n    },\n    // Format the displayed text for URLs longer than 30 characters\n    format: {\n      url: (value: string) => value.length > 30 ? value.substring(0, 27) + '...' : value,\n    },\n    // Provide a custom React component for all links\n    component: ({ tagName, attributes, content }: any) => {\n      const Tag = tagName; // 'a'\n      return (\n        <Tag {...attributes} style={{ color: 'darkgreen', fontWeight: 'bold' }}>\n          {content}\n        </Tag>\n      );\n    },\n    // Render specific link types differently (e.g., hashtags)\n    render: {\n      hashtag: ({ tagName, content, href }: any) => (\n        <a key={href} href={`https://twitter.com/hashtag/${content}`} style={{ color: 'purple' }}>\n          #{content}\n        </a>\n      )\n    },\n    // Validate specific link types (e.g., only 'https' URLs)\n    validate: {\n      url: (value: string) => value.startsWith('https://')\n    }\n  };\n\n  return (\n    <div>\n      <h1>Linkify React Usage Example</h1>\n      <p>Original text: \"{textWithLinks}\"</p>\n      <div style={{ border: '1px solid #eee', padding: '15px', backgroundColor: '#f9f9f9' }}>\n        <h2>Default Linkify:</h2>\n        <Linkify>{textWithLinks}</Linkify>\n      </div>\n      <div style={{ border: '1px solid #eee', padding: '15px', marginTop: '20px', backgroundColor: '#f9f9f9' }}>\n        <h2>Linkify with Custom Options:</h2>\n        <Linkify options={customOptions}>{textWithLinks}</Linkify>\n      </div>\n    </div>\n  );\n};\n\nexport default LinkifyExample;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure target browsers are newer than Safari 10, or consider pinning to an older linkify-react version if Safari 10 support is critical.","message":"Version 4.1.0 dropped official support for Safari 10. Users targeting this browser version might encounter compatibility issues.","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Run `npm install linkifyjs linkify-react` or `yarn add linkifyjs linkify-react`.","message":"The `linkifyjs` package is a peer dependency and must be installed separately alongside `linkify-react`. Failure to do so will result in runtime errors.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Add `import 'linkifyjs/plugins/hashtag';` or similar imports at the top level of your application or component where `Linkify` is used.","message":"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.","severity":"gotcha","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=4.3.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `linkifyjs` as a direct dependency: `npm install linkifyjs` or `yarn add linkifyjs`.","cause":"The peer dependency `linkifyjs` is not installed in your project.","error":"Error: Can't resolve 'linkifyjs' in 'your-project/node_modules/linkify-react'"},{"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).","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.","error":"TypeError: Linkify is not a function (or) TypeError: Cannot read properties of undefined (reading 'default')"},{"fix":"Add `import 'linkifyjs/plugins/hashtag';` to your application's entry file or the component file where `Linkify` is used.","cause":"The `hashtag` plugin for `linkifyjs` has not been imported.","error":"Hashtags are not being detected or converted into links."}],"ecosystem":"npm"}