b3d64f8cbf
Bumps [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) from 18.1.0 to 18.2.0. - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/facebook/react/commits/v18.2.0/packages/react-dom) --- updated-dependencies: - dependency-name: react-dom dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> |
||
---|---|---|
.. | ||
.storybook | ||
public | ||
src | ||
.gitignore | ||
.npmignore | ||
.prettierignore | ||
.prettierrc.json | ||
netlify.toml | ||
package.json | ||
postcss.config.js | ||
README.md | ||
tailwind.config.js | ||
tsconfig.json | ||
webpack.config.js |
Squiggle components
This package contains the react components for squiggle. These can be used either as a library or hosted as a storybook.
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
yarn add @quri/squiggle-components
Add to App.js
:
import { SquiggleEditor } from "@quri/squiggle-components";
<SquiggleEditor
initialSquiggleString="x = beta($alpha, 10); x + $shift"
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 == "") {
return null;
} else {
return (
<SquiggleChart
squiggleString={squiggleString}
width={445}
height={200}
showSummary={true}
showTypes={true}
/>
);
}
}
Build storybook for development
We assume that you had run yarn
at monorepo level, installing dependencies.
You need to prepare by building and bundling squiggle-lang
cd ../squiggle-lang
yarn build
If you've otherwise done this recently you can skip those.
Run a development server
yarn start