> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# May 17 2024

## Versions

* Latest SDK: [1.0.129](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.146](https://www.npmjs.com/package/@veltdev/types)

## Added Variant support in customization

If you want to have multiple versions of customized components that you can swap between, you can use [variants](/ui-customization/layout#variants).

To define multiple `variants`, add multiple templates of the same component `wireframe` to the `VeltWireframe` component and give them each a `variant` name.

```jsx theme={null}
<VeltWireframe>
    <VeltCommentsSidebarWireframe variant="sidebar1">
        #Your wireframe for variant sidebar1
    </VeltCommentsSidebarWireframe>

    <VeltCommentsSidebarWireframe variant="sidebar2">
        #Your wireframe for variant sidebar2
    </VeltCommentsSidebarWireframe>
</VeltWireframe>
```

To use a specific variant, define it on the `variant` props when using the Velt component in your app.

```jsx theme={null}
<div>
    <VeltCommentsSidebar variant="sidebar2"/>
</div>
```

## Added Custom Dropdown Lists

You can have [custom dropdown lists](/async-collaboration/comments/customize-behavior/autocomplete) appear when certain `hotkeys` are pressed.

When you press a `hotkey` inside the `Comment Dialog` composer, it will open a dropdown list of items that you can select.

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/custom-dropdown.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=f898b83cb8f2d2289033c29fc18aaddf" alt="" width="1952" height="1100" data-path="images/custom-dropdown.png" />

Selecting an item frop the dropdown list will create a `chip` that is placed in the comment text.

<img src="https://mintcdn.com/velt/2O8vk8YlVD4Kq-ni/images/chip.png?fit=max&auto=format&n=2O8vk8YlVD4Kq-ni&q=85&s=78cec5666c2cfc7e6f4b19f45160d5a4" alt="" width="1952" height="1100" data-path="images/chip.png" />

## Merged useSetLocation and useAddLocation hook

The second parameter of `useSetLocation` can be set to `true` to add additional locations instead of using `useAddLocation`.

```jsx theme={null}
import { useSetLocation } from "@veltdev/react";

function YourComponent() {

	// to set main location
	useSetLocation(YOUR_LOCATION_OBJECT);
	
	// to set extra location
	useSetLocation(YOUR_EXTRA_LOCATION_OBJECT, true);
}
```

## Option to submit Comment on Enter Key Press

By default, pressing `enter` will add a new line and pressing `shift` + `enter` will submit a comment.

If you want to [change this default behavior](/async-collaboration/comments/customize-behavior/general-controls) so that pressing `enter` will submit a comment, you can set the `enterKeyToSubmit` property to `true`.

```jsx theme={null}
<VeltComments enterKeyToSubmit={true} />
```

```jsx theme={null}
// API methods
const commentElement = client.getCommentElement();
// To enable enter key to submit a comment
commentElement.enableEnterKeyToSubmit();
// To disable enter key to submit a comment
commentElement.disableEnterKeyToSubmit();
```

## Added support to disable Shadow DOM on a few more components

There are now a few more components that can have the [Shadow DOM disabled](/ui-customization/customize-css/remove-shadow-dom).

```jsx theme={null}
<VeltComments
  shadowDom={false}
  dialogShadowDom={false}
  pinShadowDom={false}
  textCommentToolShadowDom={false}
  textCommentToolbarShadowDom={false}
/>


<VeltCommentBubble shadowDom={false} />
<VeltCommentTool shadowDom={false} />
<VeltSidebarButton shadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />
```