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: () =>
Loading...
, + ssr: false, + } +); + +export function DynamicSquiggleChart({ squiggleString }) { + if (squiggleString == "") { + return ""; + } else { + return ( +