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

export default function App() {

  const { client } = useVeltClient();

  useEffect(() => {
    if (client) {
      const selectionElement = client.getSelectionElement();
      selectionElement.enableLiveSelection(); //enable live selection
      selectionElement.disableLiveSelection(); //disable live selection
    }
  }, [client]);

  return (
    <div data-live-selection-enabled="true"></div>
  );
}
1

Get the Velt client

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();
2

Create a useEffect hook

Create the hook with the client as dependency.

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

Enable live selection

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>