Skip to main content

​
1. Install dependencies

Install @quillsql/react using your favorite package manager: 
npm install @quillsql/react

​
2. Add QuillProvider

You connect Quill to React with the QuillProvider component. 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. In App.js, let’s wrap our React app with an QuillProvider. We suggest putting the QuillProvider somewhere high in your app, above any component that might need to access Quill data.
App.js
import { QuillProvider } from "@quillsql/react";
import MyApp from "./MyApp";

function App() {
  return (
    <QuillProvider
      tenants={[{ tenantField: "customer_id", tenantIds: [2] }]}
      publicKey="6579031b3e41c378aa8180ec"
    >
      <MyApp />
    </QuillProvider>
  );
}

​
3. Add your first component

After your QuillProvider is hooked up, you can add Quill Components to your app. Let’s start with the dashboard we created in the BI Platform Tutorial.
You can find the dashboard name in the BI Platform at https://app.quill.co.
Underlying queries and charts can be updated via the Quill BI Platform, and the dashboard will render the newest version.
App.js
import { QuillProvider, Dashboard } from "@quillsql/react";

function MyDashboardPage() {
  return <Dashboard name="Transactions" />;
}