QuillProvider

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