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 presenceElement = client.getPresenceElement();
presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
// Take users list data and render your own component
});
}
}, [client]);
return (
<div className="toolbar">
// example of rendering your own component
// presenceUsers.map((presenceUser) => { return ( <div key={presenceUser.userId}> {/* Add custom UI code here */} </div> ) })
</div>
);
}
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';
const { client } = useVeltClient();
2
Create a useEffect hook
Create an effect with the client as a dependency.
Make sure to check if the client is null or undefined before you use it.
React
useEffect(() => {
if (client) {
//...
}
}, [client]);
3
Subscribe to Presence users
Subscribe to the realtime Presence
users data on the current document and location.
We will send you a new list of users everytime there is a change in the status of any user, so you can build out your own Presence
UI.
React
useEffect(() => {
if (client) {
const presenceElement = client.getPresenceElement();
presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
// Take user list data and render your own component
});
}
}, [client]);
import { useVeltClient } from '@veltdev/react';
import {useEffect} from 'react';
export default function App() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
const presenceElement = client.getPresenceElement();
presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
// Take users list data and render your own component
});
}
}, [client]);
return (
<div className="toolbar">
// example of rendering your own component
// presenceUsers.map((presenceUser) => { return ( <div key={presenceUser.userId}> {/* Add custom UI code here */} </div> ) })
</div>
);
}