HTML Polygonfor React and Vue 3

HTML Polygon for React

Installation

Install the @html-polygon/react NPM package:

# NPM
npm install @html-polygon/react

# Yarn
yarn add @html-polygon/react

# PNPM
pnpm add @html-polygon/react

Then import the Polygon component into your React project:

import { Polygon } from '@html-polygon/react'

There are also “named” components available like: Pentagon, Hexagon, and Enneadecagon:

import { Pentagon, Enneadecagon } from '@html-polygon/react'

These work just like the Polygon component, except they don’t accept the sides attribute. You can find the complete list of named components in the code.

Usage

• sides attribute
• style attribute
• className attribute
• idSuffix attribute
• margin attribute
• borderWidth attribute
• borderColor attribute
• borderStyle attribute
• borderClassName attribute
• paddding attribute
• rotate attribute
• stable attribute
• center attribute
• debug attribute
• ref attribute
• Event handlers
• Accessibility attributes

sides attribute

The number of sides the polygon should have.

style attribute

CSS properties to be applied to the Polygon. Keep in mind when applying styles that there is a clip path applied to achieve the polygon’s shape, so the effect of certain styles may be unexpected. For example, attempting to set border styles here will not work well (although it will do something, it will not likely be what you want). To set border styles you will need to use the provided borderWidth, borderColor, and borderStyle attributes instead. Padding is also controlled by a seperate padding attribute.

Some CSS properties can’t be set as they will be replaced by internal styles, these are:

• clipPath - always the calculated polygon shape

className attribute

Adds a class name to the root HTML element built by the Polygon component.

idSuffix attribute

Adds a suffix to generated HTML elements built by the Polygon component. Useful if you need to address multiple polygons in a single document by their HTML id atribute.

margin attribute

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

This margin is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven margin applied in proportion.

borderWidth attribute

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

The width of the border is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven border width applied in proportion.

borderColor attribute

The color of the polygon’s border. Any CSS color value will work.

borderStyle attribute

CSS properties to be applied to the Polygon border. Keep in mind when applying styles that the border is actually an HTML div element. So the effect of certain styles may be unexpected. For example, setting backgroundColor here will override the borderColor attribute.

Some CSS properties can’t be set as they will be replaced by internal styles, these are:

• position - always absolute
• height - always 100%
• width - always 100%
• clipPath - always the calculated polygon shape for the border

borderClassName attribute

Adds a class name to the border HTML element built by the Polygon component.

padding attribute

The padding applied to text or HTML elements inside the polygon itself.

The polygon that is constructed will be built inside an HTML element which is defined by both the containing HTML and any style that is passed to the Polygon component.

This padding is a percentage from 0% to 50% of the height and width of this containing element.

That means that if you specify or inherit unequal height and width for the Polygon component, you will get uneven padding applied in proportion.

rotate attribute

Rotates the polygon shape by the given number of degrees, without rotating the contents of the polygon.

To rotate the entire polygon including its contents you can use basic CSS transform properties applied using the style attribute.

stable attribute

When true, the stable attribute applies a rotation to the polygon which places one side flat at the bottom of the polygon.

Any further rotation applied via the rotate attribute is additive to this pre-applied rotation.

center attribute

Sets the center point of the polygon within the containing element. The values are a percentage of the containing element’s height and width.

debug attribute

When true, the debug attribute adds additional styles and elements to the generated HTML in order to help visualise the code being generated.

ref attribute

You can pass a DOM node reference to the Polygon root element to allow you manipulate the Polygon using standard DOM javascript. See the React documentation on using refs for more information.

Event handlers

The Polygon component accepts the following standard React event handlers:

• onMouseOver
• onMouseOut
• onMouseDown
• onMouseUp
• onClick

Accessibility attributes

The Polygon component accepts all the standard ARIA attributes available in React, including the role attribute.