react-text-anchorize

0.0.7 • Public • Published

ES6 Environment Required!!

react-text-anchorize

var myRules = [
  {
    // "match" defines target to anchorize.
    // Don't forget capture whole expression.
    match: /(https?:\/\/twitter.com\/[^\/]+\/status\/[0-9]+)/g,
    // "wrap" is called synchronously.
    // You can wrap matched part of the text with React Component.
    wrap: function(sub) /* React.Component */ {
      return <a href={sub}>sub</a>;
    },
    // "replace" is called after text is rendered.
    // You can replace matched part of the text asynchronously,
    // by using "replaceContentsOf"
    replace: function(sub, replaceBy) /* void */ {
      myTwitterAPIClient.getEmbedHTML(sub, function(html) {
        replaceBy(<div dangerouslySetInnerHTML={{__html:html}}></div>);
      });
    }
  }
];
 
import AnchorizableText from 'react-text-anchorize';
return <AnchorizableText rules={myRules} text={"I love this tweet https://twitter.com/yuka_iguti/status/559023220100055042"} />;

Readme

Keywords

none

Package Sidebar

Install

npm i react-text-anchorize

Weekly Downloads

0

Version

0.0.7

License

MIT

Last publish

Collaborators

  • otiai10