Autodetect links without an http/https prefix using React-Markdown

React Markdown doesn't detect links without adding an http/https prefix.

The problem

jsx
import React         from 'react';
import ReactMarkdown from 'react-markdown';

const App = () => {

    let message = 'Google.com is a link without http/https prefix';
    
    return(
        
        // 🔴 Google.com won't be rendered as a link, but as a normal string
        <ReactMarkdown source = {message}/>
        
    );

}

export default App;

The solution

If you use React Linkify and React Markdown, you'll be able to detect and format links without an http/https prefix.

jsx
import React         from 'react';
import ReactMarkdown from 'react-markdown';
import Linkify       from 'react-linkify';


const App = () => {

    let message = 'Google.com is a link without http/https prefix';
    
    const linkProperties = {target: '_blank', rel: 'nofollow noopener noreferrer'}; 
    
    return(
        
        // ✅ Now Google will be rendered as a link
        // ✅ Renderers prop takes each paragraph and places <Linkify></Linkify>
        <ReactMarkdown source = {message} renderers = {{paragraph: props => 
            <Linkify properties = {linkProperties}>
                <p>{props.children}</p>
            </Linkify>
        }}/>
        
    );

}

export default App;