App.tsx
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_API_KEY}
    >
      <CustomComponent />
    </QuillProvider>
  );
}
Sample Response
{
	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
}
Make sure QuillProvider is a parent of the component using the useQuill hook.

​
Props

​
reportId
string
required
The id of the report you created in the Quill BI Platform.
Don’t have an id yet? Learn how to create a chart in the Quill BI Platform to get started.