# Code

## Props

<table><thead><tr><th>Props</th><th width="363.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td>children</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td>className</td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>avatar</td><td><p>{</p><p>  username: string,</p><p>  profilePic?: string</p><p>}</p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>removable</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>selectable</td><td>boolean</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>characterLimit</td><td>number</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onRemove</td><td>function event</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td>onSelect</td><td>function event</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

### 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.

{% hint style="warning" %}
At using the Tag component only one of these props should be true and not both at the same time.
{% endhint %}

### 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.

```jsx
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.

```jsx
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](https://2600hz.gitbook.io/sds/sds-components/simple-components/telicon)

## Live Demo

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

### React

{% embed url="<https://sipster-react-component-storybook.netlify.app/?path=%2Fstory%2Fgeneral-components-tag--selectable-tag>" %}
