Mafs

Text

The Text component is a pretty lightweight wrapper around SVG's text, namely that the anchor point is mapped to coordinate space.

The optional attach will orient the text along a cardinal direction. In the following example, the text is attached to the "west" (w).

All text inside of a Mafs view (even outside of <Text>) has monospace numbers. This means that if you have text that constantly changes, the layout of the text won't wiggle around as different numbers take up different amounts of horizontal space.

import { Mafs, CartesianCoordinates, Text, useMovablePoint } from "mafs"

function VectorExample() {
  const point = useMovablePoint([1, 1])

  return (
    <Mafs>
      <CartesianCoordinates />
      <Text
        x={point.x}
        y={point.y}
        attach="w"
        attachDistance={15}
      >
        ({point.x.toFixed(3)}, {point.y.toFixed(3)})
      </Text>
      <Text
        x={point.x}
        y={point.y}
        attach="e"
        attachDistance={15}
      >
        ({point.x.toFixed(3)}, {point.y.toFixed(3)})
      </Text>
      {point.element}
    </Mafs>
  )
}