Customize UI
Create Your Own UI
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
export default function App() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
const cursorElement = client.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
// Do something with Cursor Users list
});
}
}, [client]);
return (
<>
</>
);
}
React / Next.js
HTML
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';
2
Create a useEffect hook
Create the hook with the client as a dependency.
Make sure to check if the client is null or undefined before you use it.
useEffect(() => {
if (client) {
//...
}
}, [client]);
3
Subscribe to live cursors
Subscribe to the realtime Cursor users data on the current document and location.
We will send you a new list of cursors everytime there is a change so you can build out your own cursor UI.
const cursorElement = client.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
// Do something with Cursor Users list
});
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
export default function App() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
const cursorElement = client.getCursorElement();
cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
// Do something with Cursor Users list
});
}
}, [client]);
return (
<>
</>
);
}