@liveblocks/yjs
is a Yjs provider enabling you to use
Liveblocks as the hosted back end of your realtime collaborative application.
Read our getting started guides to learn more.
LiveblocksYjsProvider
is a
Yjs provider that allows you to connect
a Yjs document to Liveblocks. Any changes you make to the document will be
stored on Liveblocks servers and synchronized with other clients in the room.
You can connect by creating a Yjs document, then passing it to
LiveblocksYjsProvider
along with the currently connected Liveblocks room.
When using @liveblocks/react
you can connect by using
LiveblocksYjsProvider
within an effect, taking the room from useRoom
,
and cleaning up afterwards.
There are a few options you can pass as a third argument into the LiveblocksYjsProvider:
The awareness instance attached to the provider.
Cleanup function. Destroys the LiveblocksYjsProvider
instance and removes
all resources.
Add an event listener for the sync
event. The sync
event is triggered when
the client has received content from the server. Can be used to fire events when
the document has loaded.
Aliased by LiveblocksYjsProvider.on("synced")
.
Remove an event listener for the sync
event. The sync
event is triggered
when the client has received content from the server. Used to clean up
LiveblocksYjsProvider.on("sync")
.
Aliased by LiveblocksYjsProvider.on("synced")
.
Add a one-time event listener for the sync
event. The sync
event is
triggered when the client has received content from the server. Can be used to
fire events when the document has loaded.
Aliased by LiveblocksYjsProvider.once("synced")
.
Synchronously call each listener for the sync
event in the order they were
registered, passing the supplied arguments to each.
Aliased by LiveblocksYjsProvider.emit("synced")
.
Boolean. Returns whether the client is synchronized with the back end.
Does nothing, added for compatibility. Connections are handled by the Liveblocks client.
Does nothing, added for compatibility. Connections are handled by the Liveblocks client.
LiveblocksYjsProvider
instances have an awareness
property, which is
powered by
Liveblocks Presence.
You can pass it to various bindings which implement awareness, for example
plugins that enable multiplayer cursors in text editors.
Because awareness is part of presence, it’s also accessible with
room.getPresence
and useMyPresence
under the __yjs
property.
The Yjs document that the current awareness instance is attached to.
A unique number identifying which client this awareness object is attached to.
Get the current user’s awareness state.
Set the current user’s awareness state. Accepts JSON-compatible objects.
Set a single property in the current user’s awareness state. Accepts
JSON-compatible objects, or null
to remove a property.
Returns a Map
of states for each client, with each user’s unique clientId
as
the key.
A Map
of states for each client, with each user’s unique clientId
as the
key.
Provided for compatibility, but generally not necessary. This would be used for handling user awareness timeouts, but internally awareness uses Liveblocks Presence, and this handles it for you.
Provided for compatibility, but generally not necessary. Cleanup function.
Destroys the Awareness
instance and removes all resources. Used internally
by LiveblocksYjsProvider
.
Provided for compatibility, but generally not necessary. Add an event listener
for the destroy
event. The destroy
event is triggered when
awareness.destroy
has been called.
Provided for compatibility, but generally not necessary. Remove an event
listener for the destroy
event. The destroy
event is triggered when
awareness.destroy
has been called. Used to clean up
[Awareness.on("destroyed")
.]
Provided for compatibility, but generally not necessary. Add a one-time event
listener for the destroy
event. The destroy
event is triggered when
awareness.destroy
has been called.
Synchronously call each listener for the destroy
event in the order they were
registered, passing the supplied arguments to each.
We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.