Tags with continents autocomplete
Tags with Europe countries autocomplete
Default set + icon change
Tags only from source list ( Blocks adding other tags )
Component features
Some react-material-tags features:
- Works on button click or on keyboard ( also mobile ) enter
- Works with javascript object data
- AutoComplete not shows previous chosen options
- Component blocks adding the same item
- Possible to configurate by props TextField and Button
- Can be used many times in one form
- Enable to add tags from specified group and block adding any other
Components properties
| Property | Type | Description |
|---|---|---|
| defTags | array | It is list of tags which was chosen before, tipical usage is in edition when using this property We can set saved before tags. Example: [{label:"Poland"},{label:"USA"}] |
| sourceTags | array | List of tags which will be available in autocomplete. If onlyFromSource property is on true then user can only choose tags from this list. Example: [{label:"Poland"},{label:"USA"}] |
| onlyFromSource | bool | Default: false. If true then user can only add tag from sourceTags. |
| onlyFromSourceErrorText | string | Is used when onlyFromSource is on true and user wants to add other tag. |
| textField | object | Properties of material TextField ( TextField) |
| chip | object | Properties of chip component used to present single tag ( Chip) |
| containerClassName | string | Container div class, default is tags-container |
| containerStyle | object | Container div style prop. |
| onRemove | function | Is called on every remove tag. function(removedTag,allTags) |
| onAdd | function | Is called after tag is added to list. function(addedTag,allTags) |
| button | object | FloatingActionButton component props. Most important is child prop, default is ContentAdd which shows add icon. Default object looks like: {child:<ContentAdd />} |
Usage
Add to your code (ES6):import Tags from 'react-material-tags';
Add to your code (ES5):var Tags = require('react-material-tags');
render(){
const sourceTags=[
{label:"America"},
{label:"Europe"},
{label:"Africa"},
{label:"Asia"},
{label:"Australia"}
];
const defTags=[
{label:"America"}
];
return (
<Tags defTags={defTags} sourceTags={sourceTags} />
)
}
Dependencies
Component requires to work Metarial-Ui library - Metrial UI
Authors and Contributors
Author of component is Maciej Sikora - @maciejsikora. Script is on MIT licence.
Support or Contact
Having trouble with Pages? Check out our documentation or contact support and we’ll help you sort it out.