Getting started

In this guide we’ll install the GRID Editor and render a spreadsheet in a React application.

Install the editor and engine packages:
Terminal window
```
npm add @grid-is/editor-react @grid-is/apiary
```

Render an editor. Create a Model from a File and pass it to SpreadsheetEditor:

import { Model } from "@grid-is/apiary";
import { SpreadsheetEditor } from "@grid-is/editor-react";
import { useEffect, useState } from "react";

function App() {
  const [file, setFile] = useState<File | null>(null);
  const [model, setModel] = useState<Model | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!file) {
      setModel(null);
      return;
    }
    let cancelled = false;
    (async () => {
      try {
        await Model.preconditions;
        const m = await Model.fromXlsx(await file.arrayBuffer(), file.name);
        if (!cancelled) setModel(m);
      } catch (e) {
        if (!cancelled) setError(e instanceof Error ? e : new Error(String(e)));
      }
    })();
    return () => { cancelled = true; };
  }, [file]);

  if (!model) {
    return (
      <div>
        <input
          type="file"
          accept=".xlsx"
          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
        />
        {error && <p>Error: {error.message}</p>}
      </div>
    );
  }

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <SpreadsheetEditor model={model} />
    </div>
  );
}

Start your dev server and open an .xlsx file to see the editor in action.