YSweetProvider
The YSweetProvider
is a Yjs connection provider that runs on the client. It is typically configured with an auth endpoint that it uses to authorize a user to access a document. The auth endpoint returns a client token which the YSweetProvider
uses to connect to a y-sweet server where a document’s edits are synchronized and broadcasted and finally persisted.
You can create a YSweetProvider
using @y-sweet/client
’s createYjsProvider()
function.
const doc = new Y.Doc()
const docId = 'my-doc-id'
const provider = await createYjsProvider(doc, docId, '/api/auth')
If you’d like to handle fetching the client token yourself, you can pass a function that returns client token instead of an auth endpoint. Learn more in our auth endpoint explainer.
Or, if you are using React, you can use @y-sweet/react
’s YDocProvider
component to create a YSweetProvider
and Y.Doc
for Y-Sweet React hooks that are used by children of the YDocProvider
component. The <YDocProvider>
React component makes the YSweetProvider
and the Y.Doc
instance available to its children via React context, either directly through useYDoc, or indirectly through hooks like useMap and useArray.
const docId = 'my-doc-id'
<YDocProvider docId={docId} authEndpoint="/api/auth">
<MyCollaborativeApp />
</YDocProvider>
The term “Provider” is used by both Yjs and React to refer to different pieces of their libraries. The YSweetProvider
is a Yjs connection provider that’s used to sync edits to a Yjs document over a network. By contrast, the YDocProvider
is a React context provider provided by the @y-sweet/react
library.