Hooks
useQuill
A pragmatic data API for your data
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
requiredThe 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.