feat: Linkify component (#9)

src/Linkify/Linkify.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.span`
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+`;
+
+const REGEX = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+
+const parse = string => string.replace(REGEX, url => `<a target="_blank" href="${url}">${url}</a>`);
+
+const Linkify = props => (
+  <Container style={props.style || {}} dangerouslySetInnerHTML={{ __html: parse(props.children) }} />
+);
+
+export default Linkify;

src/Linkify/Linkify.mdx

@@ -0,0 +1,18 @@
+---
+menu: Components
+name: Linkify
+---
+
+import { Playground, PropsTable } from 'docz'
+import Linkify from './Linkify'
+
+# Linkify
+
+Automatically parse links contained in a body of text.
+
+## Example
+<Playground>
+  <Linkify>
+    Checkout http://google.com. Another one that is not that great is http://bing.com.
+  </Linkify>
+</Playground>

src/Linkify/index.js

@@ -0,0 +1,3 @@
+import Linkify from './Linkify';
+
+export default Linkify;

src/index.js

@@ -21,3 +21,4 @@ export Spinner from './Spinner';
 export Swtich from './Form/Switch';
 export Tabs from './Tabs';
 export ThemeProvider from './ThemeProvider';
+export Linkify from './Linkify';