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 dropdown

• initialiseTags - 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 level

• otherGroupOptions - Allows the user to set the values for the 'other' group