squiggle/packages/components
2022-08-23 11:05:02 -03:00
..
.storybook scoped tailwind preflight, top-level .squiggle wrapper 2022-06-09 23:57:45 +03:00
public Add prettier and format 2022-03-23 11:38:01 +11:00
src sample points below 2022-08-23 11:05:02 -03:00
.gitignore Add documentation and improve components 2022-03-01 10:59:48 +11:00
.npmignore Move to webpack 2022-03-22 10:40:14 +11:00
.prettierignore prettierignore forms css 2022-06-14 12:08:56 +03:00
.prettierrc.json Add prettier and format 2022-03-23 11:38:01 +11:00
netlify.toml gt -> git 2022-04-15 10:41:38 -04:00
package.json ⬆️ Bump @types/styled-components from 5.1.25 to 5.1.26 2022-08-15 15:01:43 +00:00
postcss.config.js scoped tailwind preflight, top-level .squiggle wrapper 2022-06-09 23:57:45 +03:00
README.md remove showTypes setting 2022-07-08 17:13:26 +04:00
tailwind.config.js delayed overlay and autorun spinner 2022-07-27 22:37:46 +04:00
tsconfig.json Simple line chart for Functions 2022-05-26 14:41:58 -04:00
webpack.config.js fix react externals in components 2022-06-18 14:14:01 +03:00

npm version License: MIT

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
  defaultCode="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
          defaultCode={squiggleString}
          width={445}
          height={200}
          showSummary={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