multi-select-tag-feature v0.0.1
Reusable Features
Input Tagging Feature
Installation and Usage
To use this in your app you will need to modify the getAutocompleteOptions function ( see below ) in order to work with the data you wish to use in the dropdown.
Below shows a working example of the Tagging Feature.
This is a series of test data:
const animals = [
{
groupInfo: {
group: "mammals",
group_name: "Mammals",
show_group_options_name: true,
show_group_selected_tag_name: true,
group_limit: 10,
group_selection_limit: 7,
},
groupOptions: [
{
label: "Aardvark",
value: 1,
},
{
label: "Baboon",
value: 2,
},
{
label: "Cheetah",
value: 3,
},
{
label: "Dingo",
value: 4,
},
{
label: "Elephant",
value: 5,
},
{
label: "Fox",
value: 6,
},
{
label: "Giraffe",
value: 7,
},
{
label: "Horse",
value: 8,
},
{
label: "Jaguar",
value: 9,
},
{
label: "Koala",
value: 10,
},
{
label: "Leopard",
value: 11,
},
],
},
{
groupInfo: {
group: "reptiles",
group_name: "Reptiles",
show_group_options_name: true,
show_group_selected_tag_name: true,
group_limit: 10,
group_selection_limit: 7,
},
groupOptions: [
{
label: "Alligator",
value: 1,
},
{
label: "Chameleon",
value: 2,
},
{
label: "Gecko",
value: 3,
},
{
label: "Iguana",
value: 4,
},
{
label: "Rattlesnake",
value: 5,
},
{
label: "Tortoise",
value: 6,
},
{
label: "Sea Turtle",
value: 7,
},
{
label: "Python",
value: 8,
},
{
label: "Crocodile",
value: 9,
},
{
label: "Cobra",
value: 10,
},
{
label: "Caiman",
value: 11,
},
],
}
];
module.exports = {
animals,
};
The below code uses the above test data in order to display the results in the dropdown and allow tags to be created from the dropdown or indeed created when the enter button is clicked while typing inside the input.
Please Note: The import statements may need modifying depending on how you are using this module.
import React from 'react';
import TagContainer from './TaggingFeature/TagContainer';
import { animals } from './TaggingFeature/Components/animalData';
const getAutocompleteOptions = ( inputValue ) => {
if( inputValue && inputValue !== "" ){
return animals.map( ( animal ) => {
const neObject = { ...animal };
neObject.groupOptions = neObject.groupOptions.filter( a => a.label.toLowerCase().includes( inputValue.toLowerCase() ) );
return neObject;
} );
}
return animals;
};
const promiseOptions = inputValue =>
new Promise(resolve => {
setTimeout(() => {
resolve(getAutocompleteOptions(inputValue));
}, 500);
});
const getSelectedTags = tags => {
console.log( "TAGS PASSED TO PARENT", tags );
};
const AnimalTags = () => {
return (
<div>
<h1>Animals</h1>
<TagContainer
defaultOptions
loadOptions={ promiseOptions }
passTagsToParent={ getSelectedTags }
/>
</div>
)
};
export default AnimalTags
Props
defaultOptions
- Shows the default values for the dropdown ( defaults to false )loadOptions
- Used to populate the dropdowninitialiseTags
- Gives the ability to set initial tags
passTagsToParent
- Allows selected tags to be passed to the parent so that the data is accessible at the top levelotherGroupOptions
- Allows the user to set the values for the 'other' group
4 years ago