Merge pull request #717 from quantified-uncertainty/nextjs-documentation
tweak: Add documentation for using in nextjs
This commit is contained in:
commit
5dae40221b
|
@ -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.
|
||||||
|
|
Loading…
Reference in New Issue
Block a user