Mafs | Display | Mafs: React components for interactive math

This component is the entrypoint into rendering visualizations. It must wrap all other Mafs components. On its own, it renders a blank canvas.

import { Mafs, Text } from "mafs"

function Example() {
  return (
    <Mafs>
      <Text x={0} y={0}>I love math!</Text>
    </Mafs>
  )
}

Props

<Mafs ... />

Name	Description	Default
`width`	`number \| "auto"`	—
`height`	`number`	`500`
`pan`	Whether to enable panning with the mouse and keyboard `boolean`	`true`
`viewBox`	A way to declare the "area of interest" of your visualizations. Mafs will center and zoom to this area. `{ x?: Vector2; y?: Vector2; padding?: number \| undefined; } \| undefined`	`{ x: [-3, 3], y: [-3, 3] }`
`preserveAspectRatio`	Whether to squish the graph to fill the Mafs viewport or to preserve the aspect ratio of the coordinate space. `false \| "contain"`	`contain`
`ssr`	Enable rendering on the server side. If false, an empty view will still be rendered, with nothing in it. Note that server-side rendering complicated graphs can really bloat your HTML. `boolean`	`false`

Sizing

Mafs accepts a width and height prop. width defaults to auto, which means that Mafs will scale to the width of its container. height defaults to 500px, and cannot be set to "auto".

Viewbox

When showing a visualization, it's useful to think of your content as having a useful "viewbox" designating the region in which interesting things are happening. Mafs allows you to specify this with the viewBox prop.

import { Mafs, CartesianCoordinates, Polygon } from "mafs"

function ViewboxEample() {
  return (
    <Mafs viewBox={{ x: [-5, 5], y: [-5, 5] }}>
      <CartesianCoordinates />
      <Polygon points={[[-5, -5], [5, -5], [5, 5], [-5, 5]]} />
    </Mafs>
  )
}

Aspect ratio preservation

The preserveAspectRatio prop changes how the viewbox is mapped to the Mafs viewport. Setting it to false will stretch the viewbox to fit the viewport, tossing aside the aspect ratio preservation.

import { Mafs, CartesianCoordinates, Polygon } from "mafs"

function ViewboxEample() {
  return (
    <Mafs
      viewBox={{ x: [-5, 5], y: [-5, 5] }}
      preserveAspectRatio={false}
    >
      <CartesianCoordinates />
      <Polygon points={[[-5, -5], [5, -5], [5, 5], [-5, 5]]} />
    </Mafs>
  )
}

The only other option is "contain" for now, which is also the default.

Padding

Mafs adds a padding of 0.5 to all visualizations by default. To change or remove padding, you can specify padding in the viewBox object.

<Mafs viewBox={{ ..., padding: 0 }}>
  {/* ... */}
</Mafs>