Possibility to provide pre-compilation functions..

[Dzhakhar]

Possibility to provide pre-compilation functions as a props. If you would like to modify the match.url and/or match.text before it's insertion, you can just provide the callbacks:

• preCompileURL
• preCompileText

<Linkify preCompileURL={ (url) => {
    return window.location.protocol + '//' + window.location.host + '/redirectTo?url=' + url
}}>
Hello, World! This is my website http://website.com
</Linkify>

Result:

Hello, World! This is my website <a href="https://github.com/redirectTo?url=http://website.com">
 http://website.com
</a>

[peterbe]

I have my doubts. Perhaps we can do something bigger and better that is future proof.

For example, I might prefer target="_blank" iff the URL matches someRegex.test(match.url).

Perhaps the simplest solution is to make the properties prop a callable.

E.g.

<Linkify properties={p => {
   console.log(p.href)  // logs 'https://www.github.com'
   console.log(p.text) // logs 'www.github.com'
   if (/someregex/.test(p.href)) {
      p.href += '?foo=bar'
      p.target = '_blank'
   } else if (/otherregex/.test(p.text)) {
       someGlobal()
   }
   return p
}}>Some text here www.github.com thing...</Linkify>

That means we don't need to have a specific solution for href and a specific solution for text plus it makes it possible to extend/modify the properties in runtime.

What do you think @tasti ?

I know it's just a nit but the convention @tasti uses is to put a space after the word if.

[peterbe]

I think this should be this.props.preCompileText(match.text, props.href) too so that you can re-write the text based on information of the URL.

[peterbe]

Why the word "compile"?
To me, that word means you're preparing something before you can use it. Also, the word "pre" is nice but it's jarring to me that there's no "post".

[peterbe]

Here you're repeating yourself. I think something like this would be better:

let url = match.url
if (this.props.preCompileURL) {
    url = this.props.preCompileURL(url)
}
let props = {href: url, key: `parse${this.parseCounter}match${idx}`};

[Dzhakhar]

Of course, i realized it later but forgot to fix

[peterbe]

By the way, my personal usecase is something like this:

<Linkify properties={p => {
   const siteTitle = syncLookupSiteTitle(p.href)
   if (siteTitle) {
     p.title = `Original URL: ${p.href}`
     p.text = siteTitle
  }
  return p
}}>...</Linkify>

• Would be cool if that p in the pseudo code above could be a mutable so I don't have to return it.
• Perhaps I'd like to do return false or return null to tell Linkify to NOT turn it into a hyperlink if/because of some very custom business logic.
• Would be cool if I could use async to re-render that Linkify in an async callback.

[Dzhakhar]

@peterbe i think it would be nice to allow providing function that will mutate the props before compiling, you're right, this way is more flexible than mutating a particular parts of props

[tasti]

Support for pre-compilation of url and text will be available in v1.0.0. For example:

const hrefDecorator = (href) => ...;
const textDecorator = (text) => ...;

<Linkify hrefDecorator={hrefDecorator} textDecorator={textDecorator}>
  ...
</Linkify>

Any feedback is appreciated.