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

# July 24 2024

## Versions

* Latest React SDK: [2.0.20](https://www.npmjs.com/package/@veltdev/react)
* Latest Non-React SDK: [2.0.20](https://www.npmjs.com/package/@veltdev/client)
* Latest Types: [2.0.20](https://www.npmjs.com/package/@veltdev/types)

## Added Minimap Component

We have just introduced Minimap Component within Comments. By default, it is positioned right, but you have the option to change it to left.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltComments minimapPosition="left" />

    <style>
        .relative-container {
            position: relative;
        }

        #scrollableElement {
            width: 100%;
            height: 200px; /* or any value */
            overflow: auto;
        }
    </style>

    <div className="relative-container">
        <VeltCommentsMinimap targetScrollableElementId="scrollableElement" position="left" />
        <div id="scrollableElement">
            {/* scrollable content */}
        </div>
    </div>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-comments minimap-position="left"></velt-comments>

    <style>
        .relative-container {
            position: relative;
        }

        #scrollableElement {
            width: 100%;
            height: 200px; /* or any value */
            overflow: auto;
        }
    </style>

    <div class="relative-container">
        <velt-comments-minimap target-scrollable-element-id="scrollableElement" position="left"></velt-comments-minimap>
        <div id="scrollableElement">
            <!-- scrollable content -->
        </div>
    </div>
    ```
  </Tab>
</Tabs>

## Added Support for Reaction Tool

We have added support for reaction tool in custom video player. Within the reaction tool, we have added `videoPlayerId` attribute and `onReactionToolClick` event listener.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltReactionTool videoPlayerId={videoPlayerId} onReactionToolClick={() => onReactionToolClick()} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-reaction-tool video-player-id="videoPlayerId"></velt-reaction-tool>
    <script>
        const reactionToolTag = document.querySelector('velt-reaction-tool');
        reactionToolTag.addEventListener('onReactionToolClick', (event) => {
            console.log('reaction tool clicked', event.detail);
        });
    </script>
    ```
  </Tab>
</Tabs>