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`	—
`pan`	Whether to enable panning with the mouse and keyboard `boolean`	`true`
`zoom`	Whether to enable zooming with the mouse and keyboard. This can also be an object with `min` and `max` properties to set the scale limits. `min` should be in the range (0, 1]. `max` should be in the range [1, ∞). `boolean \| { min: number; max: number; }`	`false`
`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".

Zooming and panning

Mafs can be zoomed and panned by end users using a variety of input methods. Zooming and panning can be enabled, disabled, and configured via the zoom and pan props.

The mouse wheel zooms the viewport.
Pressing and dragging pans the viewport.
The "pinch" gesture zooms and pans the viewport simultaneously.
The arrow, -, and + keys pan and zoom the viewport, with the option, meta, and shift keys adjusting the speed.

Panning is enabled by default, but zooming is opt-in. The default zoom limits are 0.5-5

import { Mafs, Coordinates, Circle, Text } from "mafs"

function ZoomExample() {
  return (
    <Mafs
      zoom={{ min: 0.1, max: 2 }}
      viewBox={{
        x: [-0.25, 0.25],
        y: [-0.25, 0.25],
        padding: 0,
      }}
    >
      <Coordinates.Cartesian subdivisions={5} />
      <Circle center={[0, 0]} radius={1} />
      <Text x={1.1} y={0.1} attach="ne">
        Oh hi!
      </Text>
    </Mafs>
  )
}

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, Coordinates, Polygon } from "mafs"

function ViewboxEample() {
  return (
    <Mafs viewBox={{ x: [-5, 5], y: [-5, 5] }}>
      <Coordinates.Cartesian />
      <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, Coordinates, Polygon } from "mafs"

function ViewboxEample() {
  return (
    <Mafs
      viewBox={{ x: [-5, 5], y: [-5, 5] }}
      preserveAspectRatio={false}
    >
      <Coordinates.Cartesian />
      <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>