Setup

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();

Create the hook with the client as dependency.

useEffect(() => {
    if (client) {
      // ...
    }
  }, [client]);

When Live Selection is enabled, users will be able to see a highlighted box around HTML elements that other users are currently interacting with.

Live Selection works out of the box with Text nodes, Input tags & Contenteditable divs.

You can enable it with:

const selectionElement = client.getSelectionElement();
selectionElement.enableLiveSelection();
selectionElement.disableLiveSelection(); // to disable

To enable Live Selection on other HTML elements, add the data-live-selection-enabled="true" attribute on the elements.

<div data-live-selection-enabled="true"></div>