squiggle/packages/components/README.md

82 lines
2.0 KiB
Markdown
Raw Normal View History

[![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)
# Squiggle components
2022-04-04 06:58:05 +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
The `@quri/squiggle-components` package offers several components and utilities for people who want to embed Squiggle components into websites.
# Usage in a `react` project
For example, in a fresh `create-react-app` project
```sh
yarn add @quri/squiggle-components
```
Add to `App.js`:
```jsx
import { SquiggleEditor } from "@quri/squiggle-components";
2022-04-30 18:10:54 +00:00
<SquiggleEditor
2022-07-05 07:32:02 +00:00
defaultCode="x = beta($alpha, 10); x + $shift"
2022-04-30 18:10:54 +00:00
jsImports={{ alpha: 3, shift: 20 }}
/>;
```
# 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;
} else {
return (
<SquiggleChart
2022-07-05 07:32:02 +00:00
defaultCode={squiggleString}
width={445}
height={200}
showSummary={true}
/>
);
}
}
```
# 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
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
```