Get started with Quill Components

Hello! 👋 This short tutorial gets you up and running with Quill Components.

​

Step 1: Install dependencies

Install Quill Components npm package:

yarn add @quillsql/components

or

npm install @quillsql/components

​

Step 2: Connect Quill to React

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.

import { QuillProvider } from "@quillsql/components";
import Routes from "./Routes";

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      publicKey={API_KEY}
      theme={THEME}
    >
      <Routes />
    </QuillProvider>
  );
}

​

Step 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 portal tutorial.

Note that the underlying queries and charts are updated via the Quill Portal, and the dashboard will render them.

import { QuillProvider, Dashboard } from "@quillsql/components";

function App() {
  return (
    <QuillProvider
      organizationId={organizationId}
      publicKey={API_KEY}
      authToken={user.jwt}
      theme={THEME}
    >
      <Dashboard
        name="spend_dashboard"
        containerStyle={{ width: "100%", height: 400 }}
      />
    </QuillProvider>
  );
}