Merge pull request #717 from quantified-uncertainty/nextjs-documentation

tweak: Add documentation for using in nextjs
This commit is contained in:
Ozzie Gooen 2022-06-20 06:39:27 -07:00 committed by GitHub
commit 5dae40221b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 null;
} else {
return (
<SquiggleChart
squiggleString={squiggleString}
width={445}
height={200}
showSummary={true}
showTypes={true}
/>
);
}
}
```
# Build storybook for development # Build storybook for development
We assume that you had run `yarn` at monorepo level, installing dependencies. We assume that you had run `yarn` at monorepo level, installing dependencies.