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, Coordinates, Text, useMovablePoint } from "mafs"
function VectorExample() {
const point = useMovablePoint([1, 1])
return (
<Mafs viewBox={{ y: [0, 2], x: [-3, 5] }}>
<Coordinates.Cartesian />
<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 ... />View on GitHub| Name | Description | Default |
|---|---|---|
x* | number | β |
y* | number | β |
attach | CardinalDirection | β |
attachDistance | number | β |
size | number | 30 |
color | string | β |
svgTextProps | SVGAttributes<SVGTextElement> | {} |