From a7db7c23d5961e3678a9e6efb0cebae70fb3702c Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Mon, 20 Jun 2022 01:45:54 -0400
Subject: [PATCH] tweak: Add documentation for using in nextjs

---
 packages/components/README.md | 37 +++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/packages/components/README.md b/packages/components/README.md
index 38e019a1..5c8845cb 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -25,6 +25,43 @@ import { SquiggleEditor } from "@quri/squiggle-components";
 />;
 ```
 
+# Usage in a Nextjs project
+
+For now, `squiggle-components` requires the `window` property, so using the package in nextjs requires dynamic loading:
+
+```
+
+import React from "react";
+import { SquiggleChart } from "@quri/squiggle-components";
+
+import dynamic from "next/dynamic";
+
+const SquiggleChart = dynamic(
+  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
+  {
+    loading: () => <p>Loading...</p>,
+    ssr: false,
+  }
+);
+
+export function DynamicSquiggleChart({ squiggleString }) {
+  if (squiggleString == "") {
+    return "";
+  } else {
+    return (
+        <SquiggleChart
+          squiggleString={squiggleString}
+          width={445}
+          height={200}
+          showSummary={true}
+          showTypes={true}
+        />
+    );
+  }
+}
+
+```
+
 # Build storybook for development
 
 We assume that you had run `yarn` at monorepo level, installing dependencies.