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 ("n", "s", "nw", etc.)

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

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

  return (
    <Mafs viewBox={{ y: [0, 2], x: [-3, 5] }}>
      <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>
  )
}

Props

<Text ... />
NameDescriptionDefault
x
number
β€”
y
number
β€”
attach
CardinalDirection
β€”
attachDistance
number
β€”
size
number
30
color
string
β€”
svgTextProps
SVGAttributes<SVGTextElement>
{}
Display
Vectors
Display
Graphs