@willchui/my-autocomplete-tag
v1.0.2
Published
MyAutocompleteTag is a tagging componenet with autocomplete function.
Downloads
4
Maintainers
Readme
@willchui/my-autocomplete-tag
MyAutocompleteTag is a tagging componenet with autocomplete function.
- Create a tag from autocomplete dropdown or from input box directly.
- Tag css can be customized.
Install
npm install --save @willchui/my-autocomplete-tag
Usage
import React from 'react'
import { MyAutocompleteTag } from '@willchui/my-autocomplete-tag'
import '@willchui/my-autocomplete-tag/dist/index.css'
const App = () => {
const handleCallback = (tagsList, message, activeItem) =>{
console.log(JSON.stringify(tagsList));
console.log(message);
console.log(JSON.stringify(activeItem));
}
const sample = {
'enableDropdown': true,
'fromDropdownOnly': true,
'dropdown': [
{title:'Toyota RAV4'},
{title:'Toyota Camry'},
{title:'Lexus - IS'},
{title:'Lexus NX'},
{title:'Lexus LC customtag', tagPrefix: 'custom_tag_css_classname'},
{title:'Chevrolet Volt'},
{title:'Chevrolet Bolt'},
{title:'Hyundai Sonata'},
{title:'Hyundai Tucson'},
{title:'Ford Mustang'},
{title:'Ford GT'}]
};
return(<>
<div className="container">
<label>Sample (Create a tag from autocomplete dropdown only): </label>
<MyAutocompleteTag placeholder="Enter your favorite car" tagListChange={handleCallback} autocompleteapi={sample}/>
<hr />
</div>
</>)
}
API Prop
MyAutocompleteTag Demo
Quick Demo in Stackblitz - MyAutocompleteTag.
License
MIT © willchui