> ## 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.

# useQuill

> A pragmatic data API for your data

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

function CustomComponent() {
  // pass in any report created in the Quill BI Platform
  const report = useQuill(QUILL_ID);
  return <pre>{JSON.stringify(report, null, 2)}</pre>;
}

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey={process.env.QUILL_PUBLIC_KEY}
    >
      <CustomComponent />
    </QuillProvider>
  );
}
```

```json Sample Response theme={null}
{
	data: {
		name: "My Report",
		rows: [...],
		columns: [...],
		chartType: "table",
		fields: [...],
		xAxisField: "created_at",
		yAxisField: "amount",
		xAxisLabel: "Created"
		yAxisLabel: "Total Amount",
		queryString: "SELECT * FROM transactions;",
	},
	loading: false,
	error: null
}
```

<Info>
  Make sure `QuillProvider` is a parent of the component using the `useQuill`
  hook.
</Info>

## Props

<ParamField path="reportId" type="string" required>
  The id of the report you created in the Quill BI Platform.

  <Tip>
    Don't have an id yet? Learn how to [create a chart](/docs/bi-platform/report) in the Quill BI Platform to get started.
  </Tip>
</ParamField>