QuillProvider
A context provider that wraps all quill components
import { QuillProvider } from "@quillsql/react";
function App() {
return (
<QuillProvider
publicKey={process.env.QUILL_API_KEY}
organizationId={user.organizationId}>
{children}
</QuillProvider>
);
}
The quill provider allows all the quill components in your app to share information which lets your dashboards render fast and update dynamically.
Similar to React’s Context.Provider
, QuillProvider
wraps your React app
and places Quill Client on the context, enabling you to access it from
anywhere in your component tree. We suggest putting the QuillProvider
somewhere high in your app, above any component that might need to access
your quill data.
With OrgId
If you’re using the Quill Cloud, you can pass in your public key and the current organizationId (if any) and the Quill Provider will automatically connect to the hosted Quill Cloud.
<QuillProvider
publicKey={process.env.QUILL_API_KEY}
organizationId={user.organizationId}>
{children}
</QuillProvider>
With QueryEndpoint
If you’re self-hosting Quill, you can point the Quill Provider to the location
of the server running the Quill SDK. You may also pass a map of query headers
that will be forwarded to your server with every request Quill sends. This can
be useful if the /quill
endpoint is behind a preexisting auth middleware.
<QuillProvider
publicKey={process.env.QUILL_API_KEY}
queryEndpoint='https://yourdomain.com/quill'
queryHeaders={{}}>
{children}
</QuillProvider>
Props
The public Quill API key. This can be found in the Quill portal in the “Settings” tab.
The environment this app is running in (eg. “production”).
The organization id of the user. Required if not passing a queryEndpoint. If this value is not passed in on the frontend, it should be passed in on the backend if you are using a self-hosted server.
The url of your self-hosted server running the quill server SDK, if any.
Additional query headers passed along with all requests to the custom query endpoint, if any.
Whether to include credentials with requests to the query endpoint.
A custom theme used throughout your dashboard.
The children of the provider. This is usually the rest of your app.