{"id":18711,"library":"react-linkify","title":"React Linkify","description":"A React component that automatically transforms URLs, emails, and other linkable text patterns into clickable anchor tags. Current stable version is 0.2.2, with a 1.0.0-alpha release available. It wraps the linkify-it library and recurses through children to detect links, supporting custom component wrappers, properties, and the ability to customize the underlying linkify-it instance. Differentiators include simple declarative usage as a React component, support for nested elements, and full customization via the linkify-it API.","status":"active","version":"1.0.0-alpha","language":"javascript","source_language":"en","source_url":"https://github.com/tasti/react-linkify","tags":["javascript","react-linkify","react","linkify","react-component","link","url","email","autolink"],"install":[{"cmd":"npm install react-linkify","lang":"bash","label":"npm"},{"cmd":"yarn add react-linkify","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-linkify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for link detection","package":"linkify-it","optional":false}],"imports":[{"note":"Default export; CJS require also works but ESM import is recommended.","wrong":"const Linkify = require('react-linkify')","symbol":"Linkify","correct":"import Linkify from 'react-linkify'"},{"note":"Named export of the underlying linkify-it instance for customization.","wrong":"import { linkify } from 'react-linkify' (correct, but common mistake is forgetting it's a named export)","symbol":"linkify","correct":"import { linkify } from 'react-linkify'"},{"note":"MATCH is a static property on the default export, not a named export.","wrong":"import { MATCH } from 'react-linkify'","symbol":"MATCH","correct":"import Linkify from 'react-linkify'; Linkify.MATCH"}],"quickstart":{"code":"import React from 'react';\nimport Linkify from 'react-linkify';\n\nfunction App() {\n  return (\n    <Linkify>\n      Visit example.com or email test@example.com.\n    </Linkify>\n  );\n}\n\nexport default App;","lang":"javascript","description":"Basic usage of the Linkify component to turn URLs and emails into clickable links."},"warnings":[{"fix":"Define your own MATCH placeholder string and pass it via the 'properties' prop.","message":"Linkify.MATCH is no longer exported as a constant in v1.0.0-alpha. Use a custom string placeholder instead.","severity":"deprecated","affected_versions":">=1.0.0-alpha"},{"fix":"Pass a 'component' prop that wraps each link (e.g., 'span') to preserve existing behavior.","message":"In v1.0.0-alpha, the component no longer recurses into nested children by default; you must use <Linkify component='span'> to wrap text nodes.","severity":"breaking","affected_versions":">=1.0.0-alpha"},{"fix":"Clone or isolate the instance if you need separate configurations.","message":"Linkify modifies the global linkify-it instance when using the named export 'linkify'. This can lead to unexpected behavior if multiple components share the same instance.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install linkify-it' or 'yarn add linkify-it'.","cause":"Missing dependency 'linkify-it' not automatically installed with react-linkify.","error":"Module not found: Can't resolve 'linkify-it'"},{"fix":"Use a plain string like 'MATCH' in the properties object instead.","cause":"Using Linkify.MATCH in v1.0.0-alpha where it was removed.","error":"TypeError: Cannot read property 'MATCH' of undefined"},{"fix":"Ensure the parent component provides its own keys to static children, or use React.Fragment to isolate.","cause":"Linkify adds keys to generated <a> elements but may conflict with other keys in the same parent.","error":"Warning: Each child in a list should have a unique \"key\" prop"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}