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

Travis build: 92

Browse Source
This commit is contained in:
30secondsofcode
2019-10-06 04:38:02 +00:00
parent 754a759d12
commit 85e9698b04
3 changed files with 153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
README.md
View File

@ -78,6 +78,7 @@ import ReactDOM from 'react-dom';
* [`PasswordRevealer`](#passwordrevealer)
* [`Select`](#select)
* [`Slider`](#slider)
* [`TagInput`](#taginput)
* [`TextArea`](#textarea)
* [`UncontrolledInput`](#uncontrolledinput)
@ -967,6 +968,118 @@ ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getEleme
<br>[⬆ Back to top](#contents)
### TagInput
Renders a tag input field.
- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.
- Use `Array.prototype.map()` on collected nodes to render the list of tags.
- Define the `addTags` method, which will be executed on pressing the `Enter` key.
- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.
- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.
- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.
```css
.tag-input {
display: flex;
flex-wrap: wrap;
min-height: 48px;
padding: 0 8px;
border: 1px solid #d6d8da;
border-radius: 6px;
}
.tag-input input {
flex: 1;
border: none;
height: 46px;
font-size: 14px;
padding: 4px 0 0;
&:focus {
outline: transparent;
}
}
#tags {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 8px 0 0;
}
.tag {
width: auto;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
padding: 0 8px;
font-size: 14px;
list-style: none;
border-radius: 6px;
margin: 0 8px 8px 0;
background: #0052cc;
}
.tag-title {
margin-top: 3px;
}
.tag-close-icon {
display: block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 14px;
margin-left: 8px;
color: #0052cc;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
```
```jsx
function TagInput(props) {
const [tags, setTags] = React.useState(props.tags);
const removeTags = indexToRemove => {
setTags([...tags.filter((_, index) => index !== indexToRemove)]);
};
const addTags = event => {
if (event.target.value !== "") {
setTags([...tags, event.target.value]);
event.target.value = "";
}
};
return (
<div className="tag-input">
<ul id="tags">
{tags.map((tag, index) => (
<li key={index} className="tag">
<span className="tag-title">{tag}</span>
<span className="tag-close-icon" onClick={() => removeTags(index)}>
x
</span>
</li>
))}
</ul>
<input
type="text"
onKeyUp={event => (event.key === "Enter" ? addTags(event) : null)}
placeholder="Press enter to add tags"
/>
</div>
);
}
```
<details>
<summary>Examples</summary>
```jsx
ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));
```
</details>
<br>[⬆ Back to top](#contents)
### TextArea
Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.

17
snippet_data/snippetList.json
View File

@ -382,6 +382,23 @@
"hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
}
},
{
"id": "TagInput",
"type": "snippetListing",
"title": "TagInput",
"attributes": {
"text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n",
"tags": [
"input",
"visual",
"state",
"intermediate"
]
},
"meta": {
"hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141"
}
},
{
"id": "TextArea",
"type": "snippetListing",

23
snippet_data/snippets.json
View File

@ -520,6 +520,29 @@
"hash": "9f8634ca4a5f49134cb88e00c0f193c6c6c5cf8ee60482a16782c04f48595176"
}
},
{
"id": "TagInput",
"title": "TagInput",
"type": "snippet",
"attributes": {
"fileName": "TagInput.md",
"text": "Renders a tag input field.\n\n- Define a `TagInput` component and use `React.useState()` hook to initialize an array with tags passed as `props`.\n- Use `Array.prototype.map()` on collected nodes to render the list of tags.\n- Define the `addTags` method, which will be executed on pressing the `Enter` key.\n- The `addTags` method uses the `setTabs` method to add the new tag using the spread (`...`) operator to prepend the existing tags and adds the new tag at the end of the `tags` array.\n- Define the `removeTags` method, which will be executed on clicking the delete icon in the tag.\n- Use `Array.prototype.filter()` in `removeTags` method to remove the tag using the `index` of the tag to filter it out from `tags` array.\n\n",
"codeBlocks": {
"style": ".tag-input {\n display: flex;\n flex-wrap: wrap;\n min-height: 48px;\n padding: 0 8px;\n border: 1px solid #d6d8da;\n border-radius: 6px;\n}\n.tag-input input {\n flex: 1;\n border: none;\n height: 46px;\n font-size: 14px;\n padding: 4px 0 0;\n &:focus {\n outline: transparent;\n }\n}\n#tags {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 8px 0 0;\n}\n.tag {\n width: auto;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n padding: 0 8px;\n font-size: 14px;\n list-style: none;\n border-radius: 6px;\n margin: 0 8px 8px 0;\n background: #0052cc;\n}\n.tag-title {\n margin-top: 3px;\n}\n.tag-close-icon {\n display: block;\n width: 16px;\n height: 16px;\n line-height: 16px;\n text-align: center;\n font-size: 14px;\n margin-left: 8px;\n color: #0052cc;\n border-radius: 50%;\n background: #fff;\n cursor: pointer;\n}",
"code": "function TagInput(props) {\n const [tags, setTags] = React.useState(props.tags);\n const removeTags = indexToRemove => {\n setTags([...tags.filter((_, index) => index !== indexToRemove)]);\n };\n const addTags = event => {\n if (event.target.value !== \"\") {\n setTags([...tags, event.target.value]);\n event.target.value = \"\";\n }\n };\n return (\n <div className=\"tag-input\">\n <ul id=\"tags\">\n {tags.map((tag, index) => (\n <li key={index} className=\"tag\">\n <span className=\"tag-title\">{tag}</span>\n <span className=\"tag-close-icon\" onClick={() => removeTags(index)}>\n x\n </span>\n </li>\n ))}\n </ul>\n <input\n type=\"text\"\n onKeyUp={event => (event.key === \"Enter\" ? addTags(event) : null)}\n placeholder=\"Press enter to add tags\"\n />\n </div>\n );\n}",
"example": "ReactDOM.render(<TagInput tags={['Nodejs', 'MongoDB']}/>, document.getElementById('root'));"
},
"tags": [
"input",
"visual",
"state",
"intermediate"
]
},
"meta": {
"hash": "d2ebdb53ce2a517e3dc74045ab7dff50f348b10b8eb2cc588b8fc86d8745c141"
}
},
{
"id": "TextArea",
"title": "TextArea",