Creating Primitives

Primitives in react-use-polygon not only just having polygon like: triangle, square, pentagon. They also include circle, curves and other shapes as well.

We allow multiples ways to create a primitive, below will walk you through some basics to work with them.

Basic usage

All primitives have their respective React hooks that can be easily consumed by your functional component.

Below will create a triangle primitive. You can pass in configurations to customize the primitive:

const triangle = useTriangle();

// or define the triangle size
const triangle = useTriangle({
  size: 100,
});

With that configuration, a triangle that inscribes in a circle of diameter 100 unit will be created.

tip

Don't worry about the configurations for now, most hooks will have default value(s) for them. If you're interested, you can find their configurations in their respective pages below.

Regarding the unit drawn, it will depend on how you render the primitive, most likely the unit will be pixels.

Regular Polygons

Regular polygons are the simplest types of primitive, where every side has the same length and every vertex spread out evenly from the origin. For example, a pentagon has 5 sides, each side has the same length and each vertex is spread out by 72 degrees from the origin.

You can define the dimension of a polygon using size (which will be inscribed in an imaginary circle with that diameter), or the length of each side using sideLength:

const hexagon = useHexagon({
  size: 100,
  // or
  sideLength: 100, // Note these 2 will not return the same result
});

We had prepared you with multiple pre-made regular polygons from 3 to 8 sides, which are: useTriangle, useSquare, usePentagon, useHexagon, useHeptagon and useOctagon. Of course, you can create a n-sided regular polygon yourself, by calling usePolygon and passing in the number of sides you want:

// A nonagon
const nonagon = usePolygon({
  sides: 9,
});

Irregular Polygons

Irregular polygons are normally more complex polygon. They have difference side lengths and angles among vertices. You can create your own irregular polygon by using vertices props with usePolygon:

const rightAngledTriangle = usePolygon({
  vertices: [
    { x: 0, y: -40 },
    { x: 30, y: 0 },
    { x: 0, y: 0 },
  ],
});

Other primitives

Not just polygon, we also have various geometry primitives and other "shapes", such as: useArc, useSector, useSegment, useKite and more.

Common Configurations

All primitives share a common set of configuration properties, such as position, rotate and scale:

const triangle = useTriangle({
  side: 100,
  position: { x: 100, y: 100 },
  rotate: 45,
  scale: 2,
});

You can consider them as transformation after them being drawn, where position can be considered as transform: translate of CSS to the primitive.

tip

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

Reactivity

Currently, these configurations are being snapshot on mount for performance concerns. You can use the modifyConfig callback, from the primitive, to update the configurations:

const triangle = useTriangle({
  size,
  position,
  rotate,
  scale,
});

// Any updates happens, only need to pass in configs that changed
triangle.modifyConfig({ position, rotate, scale });

We hope to make all of those configurations become fully reactive, so you can animate them easier without the need of using another callback.