linkify-react

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;