Menu

gitpiper

AutoLink react Code Snippet in 2024

componentsfragmentregexpintermediate

Last Updated: 13 May 2024

Renders a string as plaintext, with URLs converted to appropriate link elements.

  • Use String.prototype.split() and String.prototype.match() with a regular expression to find URLs in a string.
  • Return matched URLs rendered as <a> elements, dealing with missing protocol prefixes if necessary.
  • Render the rest of the string as plaintext.
const AutoLink = ({ text }) => { const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; return ( <> {text.split(delimiter).map(word => { const match = word.match(delimiter); if (match) { const url = match[0]; return ( <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a> ); } return word; })} </> ); };
ReactDOM.render( <AutoLink text="foo bar baz http://example.org bar" />, document.getElementById('root') );

react snippet similar to AutoLink For You in May 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️