Update example

Author: iansinnott

example/index.js

@@ -2,18 +2,40 @@ import React, { PropTypes } from 'react';
 import { render } from 'react-dom';
 import reactReplaceString from 'react-string-replace';
 
-const HighlightNumbers = React.createClass({
+const Demo = React.createClass({
   propTypes: {
     content: PropTypes.string.isRequired,
   },
 
+  /**
+   * NOTE: In many React examples you will see the `i` or `index` variable used
+   * as the key for JSX tags (such as the `<a>` tags in this example), however
+   * in this case we are iterating in three separate loops. This menas that we
+   * cannot use `key={i}` because all three JSX tags could get the same key.
+   */
   render() {
+    const text = 'Hey @ian_989, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf';
+    let replacedText;
+
+    // Match URLs
+    replacedText = reactReplaceString(text, /(https?:\/\/\S+)/g, match => (
+      <a key={match} href={match}>{match}</a>
+    ));
+
+    // Match @-mentions
+    replacedText = reactReplaceString(replacedText, /@(\w+)/g, match => (
+      <a key={match} href={`https://twitter.com/${match}`}>@{match}</a>
+    ));
+
+    // Match hashtags
+    replacedText = reactReplaceString(replacedText, /#(\w+)/g, match => (
+      <a key={match} href={`https://twitter.com/hashtag/${match}`}>#{match}</a>
+    ));
+
     return (
       <div>
-        <h1>Highlight Numbers</h1>
-        {reactReplaceString(this.props.content, /(\d+)/g, (match, i) => (
-          <span key={i} style={{ color: 'red' }}>{match}</span>
-        ))}
+        <h1>React String Replace Demo</h1>
+        {replacedText}
       </div>
     );
   },
@@ -22,4 +44,4 @@ const HighlightNumbers = React.createClass({
 const content = 'Hey my number is 555-555-5555.';
 
 // Render the app
-render(<HighlightNumbers content={content} />, document.getElementById('root'));
+render(<Demo content={content} />, document.getElementById('root'));