usePolygon

Hook used to create basic polygons, both regular and irregular polygons with different configurations.

It is aliased to create other regular polygons such as useTriangle, useSquare, etc.

Configuration

(PolygonConfig | undefined) usePolygon accepts two different ways to configure a polygon:

1. Regular polygon

Property	Type	Default	Description
sides	number	4	The number of sides.
sideLength	number	100	The length of each side (optional).
size	number	100	The diameter of circumscribed circle that polygon drawn in (optional).

tip

When defining any regular polygon, you can specify either sideLength or size.

If you define both, size will always take precedence.

2. Irregular polygon

Property	Type	Default	Description
vertices	Vertex[]	[]	Vertices of the polygon (at least 3 needed).

extends Primitive Configuration

(PrimitiveConfig) Base configurations for all primitives.

Property	Type	Default	Description
scale	number | Vertex	1	Scaling factor of the primitive. If Vertex is provided, it will scale x and y dimension accordingly (optional).
rotate	number	0	Rotation of the primitive, in degrees, in clockwise manner (optional).
position	Vertex	{ x: 0, y: 0 }	Moving distance away from the primitive drawing centre. By default, primitive will start drawing in origin (0, 0) (optional).

info

scale, rotate and position can be considered as transformation of polygon after drawn, where position can be considered as transform: translate of css to the primitive.

The polygon will first be scaled, then rotated and lastly, translated.

Returns

(Primitive) All primitive return the following properties:

Property	Type	Description
vertices	Vertex[]	Vertices of the primitive.
edges	Edge[]	Edges of the primitive.
faces	Face[]	Faces of the primitive.
centroid	Vertex	Centroid (geometric centre) of primitive.
boundingBox	BoundingBox	Space constraint of the primitive, with properties x, y, width and height.
svgPath	string	SVG path representing the shape of the primitive.
drawToCanvas	(ctx: CanvasRenderingContext2D) => void	Callback that draws the primitive to a canvas context.
modifyConfig	(newConfig: Partial<PolygonConfig>) => void	Callback to update the configuration of the primitive.

Example

import { usePolygon } from "react-use-plygon";

// A pentagon with 20px of length and 5px right and 8px down from the origin
const polygon1 = usePolygon({
  sides: 5,
  sideLength: 20,
  position: { x: 5, y: 8 },
});

// An isosceles triangle with custom vertices
const polygon2 = usePolygon({
  vertices: [
    { x: 0, y: 0 },
    { x: 4, y: 0 },
    { x: 2, y: 2 },
  ],
});