react-linkify Roadmap to v1.0.0 💯

Based on the recent feature request, I've been brainstorming how we could incorporate them into this package and solidify the API.

Since there are similarities between these features, it would be best if we synchronize these ideas and lay them out here. Below is what I imagine the package to look like. Anyone's input is more than welcome!

Overview

Let's begin with the end in mind. Here's what the directory structure would potentially look like:

src/
  components/
    __tests__
    Linkify.jsx
    LinkifyIt.jsx
  decorators/
    hrefDecorator.js
    textDecorator.js
  index.js
.babelrc
.gitignore
LICENSE
README.md
package.json

Requirements

There are several components to get this done.

Custom Handlers

Related: #10, #20

File: src/components/LinkifyIt.jsx

To allow flexibility of and prevent convoluting the base Linkify component, we will introduce a LinkifyIt component. This would allow us to take advantage of existing logic from linkify-it without tightly coupling this package to it.

Href Decorator

Related: #21

File: src/decorators/hrefDecorator.js

To support modifying a matched href. This would be more so a collection of utility implementations that would commonly be used for the examples below.

Examples:

Wrap a url with a tracking url
Add query parameters to a url

Text Decorator

Related: #22

File: src/decorators/textDecorator.js

Similar to the above, except modifying the actual text that is displayed.

Examples:

Hide the protocol in a url
Display external link icons (https://en.wikipedia.org/wiki/Help:External_link_icons)

Miscellaneous

Compatibility with react-native
Persist compatibility with server-side rendering

I'd love to hear some feedback and get some extra hands on this roadmap!

Aug 13 '16 05:08 tasti

One thing I'd like to achieve is to do custom things with the text depending on the URL. For example:

// calling it "textProxy" but it can be "textDecorator" or "whatEver"
<Linkify textProxy={(text, href) => {
  if (youtubeURLregex.test(href)) {
    return <span>Watch on YouTube <img src="/static/youtube.png"/></span>
  } else {
    return text
  }
}}>
  ...
</Linkify>

In other words, I think I should be able to "intervene" both the href and the text and when my "callback" is executed it should be passed both things.