andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleanup snippet categories

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-21 14:32:14 +03:00
parent 9de7519520
commit 9139ea2ace
5 changed files with 77 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
README.md
View File

@ -81,25 +81,18 @@ import ReactDOM from 'react-dom';
</details>
### Utility
<details>
<summary>View contents</summary>
* [`AutoLink`](#autolink-)
</details>
### Visual
<details>
<summary>View contents</summary>
* [`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';
</details>
### Viual
<details>
<summary>View contents</summary>
* [`Mailto`](#mailto)
</details>
---
@ -954,50 +938,6 @@ ReactDOM.render(
---
## Utility
### AutoLink ![advanced](/advanced.svg)
Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
- Return a `<React.Fragment>` with matched URLs rendered as `<a>` 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 (
<React.Fragment>
{text.split(delimiter).map(word => {
let match = word.match(delimiter);
if (match) {
let url = match[0];
return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
}
return word;
})}
</React.Fragment>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(
<AutoLink text="foo bar baz http://example.org bar" />,
document.getElementById('root')
);
```
</details>
<br>[⬆ Back to top](#contents)
---
## Visual
@ -1087,6 +1027,45 @@ ReactDOM.render(
<br>[⬆ Back to top](#contents)
### AutoLink ![advanced](/advanced.svg)
Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
- Return a `<React.Fragment>` with matched URLs rendered as `<a>` 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 (
<React.Fragment>
{text.split(delimiter).map(word => {
let match = word.match(delimiter);
if (match) {
let url = match[0];
return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
}
return word;
})}
</React.Fragment>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(
<AutoLink text="foo bar baz http://example.org bar" />,
document.getElementById('root')
);
```
</details>
<br>[⬆ Back to top](#contents)
### Carousel
Renders a carousel component.
@ -1405,6 +1384,36 @@ ReactDOM.render(<FileDrop handleDrop={console.log} />, document.getElementById('
<br>[⬆ 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 `<a>` element with an appropriate `href` attribute.
- Render the link with `props.children` as its content.
```jsx
function Mailto({ email, subject, body, ...props }) {
return (
<a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(
<Mailto email="foo@bar.baz" subject="Hello" body="Hello world!">
Mail me!
</Mailto>,
document.getElementById('root')
);
```
</details>
<br>[⬆ Back to top](#contents)
### Modal
Renders a Modal component, controllable through events.
@ -1974,41 +1983,6 @@ ReactDOM.render(<TreeView data={data} name="data" />, 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 `<a>` element with an appropriate `href` attribute.
- Render the link with `props.children` as its content.
```jsx
function Mailto({ email, subject, body, ...props }) {
return (
<a href={`mailto:${email}?subject=${subject || ''}&body=${body || ''}`}>{props.children}</a>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(
<Mailto email="foo@bar.baz" subject="Hello" body="Hello world!">
Mail me!
</Mailto>,
document.getElementById('root')
);
```
</details>
<br>[⬆ 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)._

4
snippet_data/snippetList.json
View File

@ -24,7 +24,7 @@
"attributes": {
"text": "Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.\n\n- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.\n- Return a `<React.Fragment>` with matched URLs rendered as `<a>` 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 `<a>` element with an appropriate `href` attribute.\n- Render the link with `props.children` as its content.\n\n",
"tags": [
"viual",
"visual",
"beginner"
]
},

4
snippet_data/snippets.json
View File

@ -36,7 +36,7 @@
"example": "ReactDOM.render(\r\n <AutoLink text=\"foo bar baz http://example.org bar\" />,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"utility",
"visual",
"string",
"fragment",
"regexp",
@ -267,7 +267,7 @@
"example": "ReactDOM.render(\r\n <Mailto email=\"foo@bar.baz\" subject=\"Hello\" body=\"Hello world!\">\r\n Mail me!\r\n </Mailto>,\r\n document.getElementById('root')\r\n);"
},
"tags": [
"viual",
"visual",
"beginner"
]
},

2
snippets/AutoLink.md
View File

@ -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 `<a>` elements.

2
snippets/Mailto.md
View File

@ -1,6 +1,6 @@
---
title: Mailto
tags: viual,beginner
tags: visual,beginner
---
Renders a link formatted to send an email.