Code

Props

Props	Data Type	Required
children	string	✅
className	string	❌
avatar	{ username: string, profilePic?: string }	❌
removable	boolean	❌
selectable	boolean	❌
characterLimit	number	❌
onRemove	function event	❌
onSelect	function event	❌

removable and selectable

These props are going to determine the behavior of the Tag component.

If the removable prop is true, there is going to appear at the right side of the Tag component a small exit button that is going to be directly attached to the onRemove function event.

If that's not the case, and selectable prop is true instead the removable one, then the Tag Component is going to have a behavior similar to a checkbox. Also it is important to keep in mind this variant is going to be directly attached to the onRemove function event.

At using the Tag component only one of these props should be true and not both at the same time.

onSelect

This function event is going to be only available when the selectable prop of the component is true. This is going to return as parameter an object with the selected Tag value and checked state. This is going to to help developers to make the filters and removing the object properly.

const [array, setArray] = useState(['Item 1', 'Item 2', 'Item 3']);

const selectAction = (e)=>{
    const {value, checked} = e;
    if(checked){
        console.log(`${value} is selected`);
    }else{
        console.log(`${value} is not selected`);
    }
}

return(
    <div classname='tagBox'>
        array.map(item => (
            <tag content={item} selectable onSelect={selectAction} />
        ))
    </div>
)

onRemove

This function event is going to be only available when the removable prop of the component is true. This is going to return as parameter an object with the selected Tag to be removed. This is going to to help developers to make the filters and removing the object properly.

const [array, setArray] = useState(['Item 1', 'Item 2', 'Item 3']);

const removeItem = (e)=>{
    let newArray = array.filter(item => item !== e.value);
    setArray(newArray);
}

return(
    <div classname='tagBox'>
        array.map(item => (
            <tag content={item} removable onRemove={removeItem} />
        ))
    </div>
)

Components Dependency

For this component elaboration there were used the following internal components:

• Telicon

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

General Components / Tag - Selectable Tag ⋅ Storybooksipster-react-component-storybook.netlify.app