 # Lines

There are a few components for lines, depending on how you want to construct them.

## Line segment

``````import * as React from "react"
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"

function LineSegmentExample() {
const point1 = useMovablePoint([-1, -1])
const point2 = useMovablePoint([2, 1])

return (
<Mafs>
<CartesianCoordinates />
<Line.Segment
point1={point1.point}
point2={point2.point}
/>
{point1.element}
{point2.element}
</Mafs>
)
}``````

## Line through two points

``````import * as React from "react"
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"

function LineThroughPointsExample() {
const point1 = useMovablePoint([-1, -1])
const point2 = useMovablePoint([2, 1])

return (
<Mafs>
<CartesianCoordinates />
<Line.ThroughPoints
point1={point1.point}
point2={point2.point}
/>
{point1.element}
{point2.element}
</Mafs>
)
}``````

## Point and slope

``````import * as React from "react"
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
} from "mafs"

function LinePointSlopeExample() {
const point = useMovablePoint([-1, -1])
const slope = useMovablePoint([0, 1], {
constrain: "vertical",
})

return (
<Mafs>
<CartesianCoordinates />
<Line.PointSlope
point={point.point}
slope={slope.y}
/>
{point.element}
{slope.element}
</Mafs>
)
}``````

## Point and angle

``````import * as React from "react"
import {
Mafs,
Line,
CartesianCoordinates,
useMovablePoint,
useStopwatch,
} from "mafs"

function LinePointAngleExample() {
const point = useMovablePoint([-1, -1])
const { time: angle, start } = useStopwatch()
React.useEffect(() => start(), [start])

return (
<Mafs>
<CartesianCoordinates />
<Line.PointAngle point={point.point} angle={angle} />
{point.element}
</Mafs>
)
}``````