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

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
        const liveStateDataId = "uniqueId";
        const liveStateData = { "key": "value" }; // any type of data
        const liveStateSyncElement = client.getLiveStateSyncElement();

        //Set Live State Data
        liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);


        //Subscribe to Live State Data
        liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
        // your logic here...
        });
    }
  })


  return (
    <div>
      ...
    </div>
  );
}

  • React / Next.js

  • HTML

Live State Sync

With Live State Sync, you can create a shared data object that persists and syncs across all clients live on a given document.

1

Set or Update a shared live data object

Sets or updates a custom shared data object that will be synced across all clients live on the current document. Pass in a unique ID and the data object you want to sync. If the object already exists with that ID, then it will be updated.

Input params:

  • liveStateDataId: string;

  • liveStateData: any;

const liveStateDataId = 'uniqueId';
const liveStateData = { 'key': 'value' }; // any type of data
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.setLiveStateData(liveStateDataId, liveStateData);
Data that is added via Live State Sync will persist until it is manually cleaned up. We don’t auto reset the live state data after any period of time.
2

Get a shared live data object

Subscribes to an existing shared live data object. Pass in the unique ID that you had used to set the data.

Input params:

  • liveStateDataId: string; (optional)
const liveStateDataId = 'uniqueId';
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.getLiveStateData(liveStateDataId).subscribe((data) => {
		// your logic here...
});
3

useLiveState() Hook

The useLiveState() hook can be used to sync data realtime for specific state variables in your code.

Hook syntax:

import {useLiveState} from '@veltdev/react'
const [value, setValue] = useLiveState<TYPE_OF_VALUE>(UNIQUE_ID, INITIAL_VALUE, SYNC_DURATION);
  • TYPE_OF_VALUE -> optional, only applicable for typescript
  • UNIQUE_ID -> unique id in string to be synced across the screens
  • INITIAL_VALUE -> initial value of the state
  • SYNC_DURATION -> duration in milliseconds to sync realtime (optional, default value 50ms)
  • value -> current state value (similar to useState hook)
  • setValue -> function to be called to set next value (similar to useState hook)

Example:

import { useLiveState } from "@veltdev/react";

export function MyReactComponent() {
  const [counter, setCounter] = useLiveState < number > ("counter", 0);

  return (
    <div>
      <button onClick={() => setCounter((counter || 0) - 1)}>-</button>
      <span>Counter: {counter}</span>
      <button onClick={() => setCounter((counter || 0) + 1)}>+</button>
    </div>
  );
}