YSweetProvider
The YSweetProvider is a Yjs connection provider (opens in a new tab) 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 (opens in a new tab) that's used to sync edits to a Yjs document over a network. By contrast, the YDocProvider is a React context provider (opens in a new tab) provided by the @y-sweet/react library.