Live Selection
Setup
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>
Was this page helpful?