> ## Documentation Index
> Fetch the complete documentation index at: https://quill.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# QuillProvider

> A context provider that wraps all quill components

```tsx App.tsx theme={null}
import { QuillProvider } from "@quillsql/react";

function App() {
  return (
    <QuillProvider
      publicKey={process.env.QUILL_PUBLIC_KEY}
      tenants={[
        { tenantField: "customer_id", tenantIds: [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 tenants

If you're using Quill Cloud, pass your `publicKey` and the current viewer's
tenant identifiers and the Quill Provider will connect to the hosted Quill
Cloud automatically.

```jsx With tenants theme={null}
<QuillProvider
  publicKey={process.env.QUILL_PUBLIC_KEY}
  tenants={[{ tenantField: "customer_id", tenantIds: [user.organizationId] }]}
>
  {children}
</QuillProvider>
```

### With queryEndpoint

If you're self-hosting Quill, 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.

```jsx With queryEndpoint theme={null}
<QuillProvider
  publicKey={process.env.QUILL_PUBLIC_KEY}
  queryEndpoint="https://yourdomain.com/quill"
  queryHeaders={{}}
>
  {children}
</QuillProvider>
```

## Props

<ParamField path="publicKey" type="string" required>
  The public Quill API key. This can be found in the Quill BI Platform by
  clicking "Manage" on an environment in the environment dropdown -> "Copy
  public key".
</ParamField>

<ParamField path="environment" type="string">
  The environment this app is running in (eg. "production").
</ParamField>

<ParamField path="tenants" type="Array<{ tenantField: string; tenantIds: (string | number)[] }>">
  The tenants the current viewer can see data for. Required when using Quill
  Cloud (i.e. when no `queryEndpoint` is passed). When self-hosting, pass
  `tenants` here on the frontend or apply them on the backend in your server
  SDK call — but not both.

  Each entry pairs a `tenantField` (the column on your tables that identifies
  a tenant, e.g. `"customer_id"`) with one or more `tenantIds` the viewer is
  authorized to see.
</ParamField>

<ParamField path="queryEndpoint" type="string">
  The url of your self-hosted server running the quill server SDK, if any.
</ParamField>

<ParamField path="queryHeaders" type="object">
  Additional query headers passed along with all requests to the custom query
  endpoint, if any.
</ParamField>

<ParamField path="withCredentials" type="boolean">
  Whether to include credentials with requests to the query endpoint.
</ParamField>

<ParamField path="theme" type="QuillTheme">
  A custom theme used throughout your dashboard.
</ParamField>

<ParamField path="children" type="ReactNode">
  The children of the provider. This is usually the rest of your app.
</ParamField>