May 10 2024
Versions
Updates to useLiveState
Hook
The useLiveState() Hook was updated to include a config object as a third parameter.
Some background on the useLiveState()
Hook:
If you are familiar with React’s useState()
hook, we have a similar hook called useLiveState()
that can be used to sync data realtime for specific state variables in your code.
Hook syntax:
const [value, setValue] = useLiveState(UNIQUE_ID, INITIAL_VALUE, OPTIONS);
The hook takes in 3 parameters:
UNIQUE_ID
-> unique id in string to be synced across the screensINITIAL_VALUE
-> initial value of the stateOPTIONS
(object)syncDuration
-> debounce duration in milliseconds to sync realtime (optional, default value 50ms)resetLiveState
-> Boolean to reset locatl state value on server side on initiatlize of hook (default:false
)
The hook returns a setter and getter:
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, {
syncDuration: 100,
resetLiveState: true
});
return (
<div>
<button onClick={() => setCounter((counter || 0) - 1)}>-</button>
<span>Counter: {counter}</span>
<button onClick={() => setCounter((counter || 0) + 1)}>+</button>
</div>
);
}
Option to Enable DOM Change Detection in Comment Mode
By default, we skip Comment
DOM Change Detection
when users are in Comment Mode
to improve performance.
However, you can turn Comment
DOM Change Detection
back on with the changeDetectionInCommentMode
property.
This will make Comment's
reposition themselves if the DOM happens to change while in Comment Mode
.
Default: false
<VeltComments changeDetectionInCommentMode={true} />
API Methods:
const commentElement = client.getCommentElement();
// To enable change detection when comment mode is on
commentElement.enableChangeDetectionInCommentMode();
// To disable change detection when comment mode is on
commentElement.disableChangeDetectionInCommentMode();
Option to Sort Order of Comments in Sidebar
By default, the Comments
in the Sidebar
are ordered in descending order of when they were last updated.
You can change this sorting order with the sort-data
property.
There are three options for sorting:
asc
- to show comments in descendending order of when they were last updateddesc
- to show comments in ascending order of when they were last updatednone
- to show comments in the sequence they were added
<VeltCommentsSidebar sortData="asc" />
Was this page helpful?