2022-04-28 23:06:39 +00:00
|
|
|
[![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
|
|
|
|
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/quantified-uncertainty/squiggle/blob/develop/LICENSE)
|
|
|
|
|
2022-04-30 16:04:03 +00:00
|
|
|
# Squiggle components
|
2022-04-04 06:58:05 +00:00
|
|
|
|
2022-04-30 16:04:03 +00:00
|
|
|
This package contains the react components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
|
2022-02-27 04:41:30 +00:00
|
|
|
|
2022-05-10 21:06:44 +00:00
|
|
|
The `@quri/squiggle-components` package offers several components and utilities for people who want to embed Squiggle components into websites.
|
|
|
|
|
2022-04-28 23:06:39 +00:00
|
|
|
# Usage in a `react` project
|
|
|
|
|
|
|
|
For example, in a fresh `create-react-app` project
|
|
|
|
|
|
|
|
```sh
|
|
|
|
yarn add @quri/squiggle-components
|
|
|
|
```
|
|
|
|
|
|
|
|
Add to `App.js`:
|
|
|
|
|
2022-04-28 23:08:04 +00:00
|
|
|
```jsx
|
2022-04-28 23:15:15 +00:00
|
|
|
import { SquiggleEditor } from "@quri/squiggle-components";
|
2022-04-30 18:10:54 +00:00
|
|
|
<SquiggleEditor
|
|
|
|
initialSquiggleString="x = beta($alpha, 10); x + $shift"
|
|
|
|
jsImports={{ alpha: 3, shift: 20 }}
|
|
|
|
/>;
|
2022-04-28 23:06:39 +00:00
|
|
|
```
|
|
|
|
|
2022-06-20 05:45:54 +00:00
|
|
|
# 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 == "") {
|
2022-06-20 13:39:13 +00:00
|
|
|
return null;
|
2022-06-20 05:45:54 +00:00
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<SquiggleChart
|
|
|
|
squiggleString={squiggleString}
|
|
|
|
width={445}
|
|
|
|
height={200}
|
|
|
|
showSummary={true}
|
|
|
|
showTypes={true}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
2022-04-28 23:06:39 +00:00
|
|
|
# Build storybook for development
|
2022-03-25 00:18:06 +00:00
|
|
|
|
2022-04-04 06:58:05 +00:00
|
|
|
We assume that you had run `yarn` at monorepo level, installing dependencies.
|
|
|
|
|
|
|
|
You need to _prepare_ by building and bundling `squiggle-lang`
|
|
|
|
|
|
|
|
```sh
|
2022-03-25 00:18:06 +00:00
|
|
|
cd ../squiggle-lang
|
2022-03-23 14:01:51 +00:00
|
|
|
yarn build
|
|
|
|
```
|
2022-04-04 06:58:05 +00:00
|
|
|
|
2022-03-24 01:18:00 +00:00
|
|
|
If you've otherwise done this recently you can skip those.
|
2022-02-27 04:41:30 +00:00
|
|
|
|
2022-03-23 14:01:51 +00:00
|
|
|
Run a development server
|
|
|
|
|
2022-04-04 06:58:05 +00:00
|
|
|
```sh
|
2022-03-23 14:01:51 +00:00
|
|
|
yarn start
|
|
|
|
```
|