useSyncedMap
The useSyncedMap
hook works similarly to useSyncedState
, but each value within the map is updated last-writer-wins, instead of the entire map being overwritten last-writer-wins.
Signature
useSyncedMap<T>(name: string): SyncedMap<T>
Parameters
Parameter | Description |
---|---|
name | A storage name assigned to this syncedMap. If your widgets uses multiple synced maps, it is important that this is unique across the multiple `useSyncedMap calls. |
Remarks
The main use case of useSyncedMap
is to support multiple clients updating widget data concurrently. When this happens, the synced map will merge the changes in the order they are received by the server, adding / updating / removing keys. In comparison, a similar value in useSyncedState
will be clobbered by the last client.
The return value of useSyncedMap
is a Map
like JavaScript object that implements methods like get
, set
, delete
, keys()
etc.
info
Besides useSyncedMap
, another way to store data on a widget is useSyncedState
. These have different characteristics and use cases. See Widget State & Multiplayer for more information on when you should use one over the other.
Usage Example
const { widget } = figma
const { useSyncedMap, Rectangle } = widget
function SyncedMapExample() {
const voteMap = useSyncedMap<number>("sessionIdToVotes")
return (
<Rectangle
onClick={() => {
const sessionId = figma.activeUsers[0].sessionId
if (!voteMap.get(sessionId)) {
voteMap.set(sessionId, 1)
}
}}
/>
)
}
widget.register(SyncedMapExample)