diff --git a/README.md b/README.md index 6088625b1..fb94f54e3 100644 --- a/README.md +++ b/README.md @@ -81,25 +81,18 @@ import ReactDOM from 'react-dom'; -### Utility - -
-View contents - -* [`AutoLink`](#autolink-) - -
- ### Visual
View contents * [`Accordion`](#accordion-) +* [`AutoLink`](#autolink-) * [`Carousel`](#carousel) * [`Collapse`](#collapse) * [`CountDown`](#countdown-) * [`FileDrop`](#filedrop) +* [`Mailto`](#mailto) * [`Modal`](#modal) * [`StarRating`](#starrating) * [`Tabs`](#tabs) @@ -110,15 +103,6 @@ import ReactDOM from 'react-dom';
-### Viual - -
-View contents - -* [`Mailto`](#mailto) - -
- --- @@ -954,50 +938,6 @@ ReactDOM.render( --- -## Utility - - -### AutoLink ![advanced](/advanced.svg) - -Renders a string as plaintext, with URLs converted to appropriate `` elements. - -- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string. -- Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext. - -```jsx -function AutoLink({ text }) { - const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; - - return ( - - {text.split(delimiter).map(word => { - let match = word.match(delimiter); - if (match) { - let url = match[0]; - return {url}; - } - return word; - })} - - ); -} -``` - -
-Examples - -```jsx -ReactDOM.render( - , - document.getElementById('root') -); -``` -
- -
[⬆ Back to top](#contents) - ---- - ## Visual @@ -1087,6 +1027,45 @@ ReactDOM.render(
[⬆ Back to top](#contents) +### AutoLink ![advanced](/advanced.svg) + +Renders a string as plaintext, with URLs converted to appropriate `` elements. + +- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string. +- Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext. + +```jsx +function AutoLink({ text }) { + const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi; + + return ( + + {text.split(delimiter).map(word => { + let match = word.match(delimiter); + if (match) { + let url = match[0]; + return {url}; + } + return word; + })} + + ); +} +``` + +
+Examples + +```jsx +ReactDOM.render( + , + document.getElementById('root') +); +``` +
+ +
[⬆ Back to top](#contents) + ### Carousel Renders a carousel component. @@ -1405,6 +1384,36 @@ ReactDOM.render(, document.getElementById('
[⬆ Back to top](#contents) +### Mailto + +Renders a link formatted to send an email. + +- Destructure the component's props, use `email`, `subject` and `body` to create a `` element with an appropriate `href` attribute. +- Render the link with `props.children` as its content. + +```jsx +function Mailto({ email, subject, body, ...props }) { + return ( + {props.children} + ); +} +``` + +
+Examples + +```jsx +ReactDOM.render( + + Mail me! + , + document.getElementById('root') +); +``` +
+ +
[⬆ Back to top](#contents) + ### Modal Renders a Modal component, controllable through events. @@ -1974,41 +1983,6 @@ ReactDOM.render(, document.getElementById('r --- -## Viual - - -### Mailto - -Renders a link formatted to send an email. - -- Destructure the component's props, use `email`, `subject` and `body` to create a `` element with an appropriate `href` attribute. -- Render the link with `props.children` as its content. - -```jsx -function Mailto({ email, subject, body, ...props }) { - return ( - {props.children} - ); -} -``` - -
-Examples - -```jsx -ReactDOM.render( - - Mail me! - , - document.getElementById('root') -); -``` -
- -
[⬆ Back to top](#contents) - ---- - _This repository is a work in progress. If you want to contribute, please check the open issues to see where and how you can help out!_ _This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder)._ diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json index dd68b5857..7e3e87c26 100644 --- a/snippet_data/snippetList.json +++ b/snippet_data/snippetList.json @@ -24,7 +24,7 @@ "attributes": { "text": "Renders a string as plaintext, with URLs converted to appropriate `` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `` with matched URLs rendered as `` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.\n\n", "tags": [ - "utility", + "visual", "string", "fragment", "regexp", @@ -195,7 +195,7 @@ "attributes": { "text": "Renders a link formatted to send an email.\n\n- Destructure the component's props, use `email`, `subject` and `body` to create a `` element with an appropriate `href` attribute.\n- Render the link with `props.children` as its content.\n\n", "tags": [ - "viual", + "visual", "beginner" ] }, diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json index 66944dd2a..63c3d89ab 100644 --- a/snippet_data/snippets.json +++ b/snippet_data/snippets.json @@ -36,7 +36,7 @@ "example": "ReactDOM.render(\r\n ,\r\n document.getElementById('root')\r\n);" }, "tags": [ - "utility", + "visual", "string", "fragment", "regexp", @@ -267,7 +267,7 @@ "example": "ReactDOM.render(\r\n \r\n Mail me!\r\n ,\r\n document.getElementById('root')\r\n);" }, "tags": [ - "viual", + "visual", "beginner" ] }, diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 5fe9958c3..eed1e0e4f 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -1,6 +1,6 @@ --- title: AutoLink -tags: utility,string,fragment,regexp,advanced +tags: visual,string,fragment,regexp,advanced --- Renders a string as plaintext, with URLs converted to appropriate `` elements. diff --git a/snippets/Mailto.md b/snippets/Mailto.md index 06116c93b..0f169864d 100644 --- a/snippets/Mailto.md +++ b/snippets/Mailto.md @@ -1,6 +1,6 @@ --- title: Mailto -tags: viual,beginner +tags: visual,beginner --- Renders a link formatted to send an email.