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

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

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      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 Portal.

Don’t have an id yet? Learn how to create a chart in the Quill portal to get started.