Recognizing like url in comments & little changes

app/components/Comment.jsx

@@ -5,6 +5,10 @@ import { NavLink} from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { createAction as action } from 'redux-actions'
 import moment from 'moment'
+import Linkify from 'react-linkify'
+
+
+// - Import material UI libraries
 import { List, ListItem } from 'material-ui/List'
 import Divider from 'material-ui/Divider'
 import Paper from 'material-ui/Paper'
@@ -260,7 +264,9 @@ export class Comment extends Component {
             {(!this.props.isCommentOwner && !this.props.isPostOwner && this.props.disableComments )? '' : (<RightIconMenu />)}
             <div style={{ outline: "none", marginLeft: "16px", flex: "auto", flexGrow: 1 }}>
               <textarea ref={this.textareaRef} className="animate2-top10" style={{ fontWeight: 100, fontSize: "14px", border: "none", width: "100%", outline: "none", resize: "none", display: (this.props.comment.editorStatus ? 'block' : 'none') }} onChange={this.handleOnChange} value={this.state.text}></textarea>
+              <Linkify properties={{target: '_blank', style: {color: 'blue'}}}>
               <div ref={this.divCommentRef} className="animate2-top10" style={{ fontWeight: 100, fontSize: "14px", height: "100%", border: "none", width: "100%", outline: "none", resize: "none", display: (!this.props.comment.editorStatus ? 'block' : 'none') }}>{this.state.text}</div>
+              </Linkify>
             </div>
           </div>
           <div style={{ display: (this.props.comment.editorStatus ? "flex" : "none"), flexDirection: "row-reverse" }}>

package.json

@@ -26,7 +26,6 @@
     "faker": "^4.1.0",
     "file-loader": "^0.11.1",
     "firebase": "^3.9.0",
-    "flexboxgrid": "^6.3.1",
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "material-ui": "^0.18.1",
@@ -60,6 +59,7 @@
     "webpack": "^2.4.1"
   },
   "devDependencies": {
+    "css-loader": "^0.28.7",
     "karma": "^1.6.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-mocha": "^1.3.0",