Quickstart

​

1. Install dependencies

Install @quillsql/react using your favorite package manager:

​

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.

import { QuillProvider } from "@quillsql/react";
import MyApp from "./MyApp";

function App() {
  // Replace organizationId and publicKey with your values
  return (
    <QuillProvider organizationId="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 portal tutorial.

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

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