Physical Quantity Web Component

physical-quantity(alias: uc-qty for quantity with built-in unit conversion) is a web component that allows you to create and manipulate physical quantities with different units. It provides an input for the value and a dropdown for the unit, automatically converting between units in the same category.

It is a new HTML element for expressing physical quantities, featuring self-contained unit conversion, a compact and clean UI, no redundant dual units, and seamless integration across all websites and platforms.

Features

Create a physical quantity with a value and unit.
Automatically convert between units within the same category.
Display values with customizable decimal places if not an integer; show integers without decimal parts.
Easy to integrate into any web project.

Demo: Physical Quantity element - No Unit Converter or Dual Units Needed

Live Demo 1 - technical writing
Live Demo 2 - typical product specs
Live Demo 3 - typical product specs
Live Demo 4 - unique ft-in conversion

Installation

You can install the physical-quantity component using npm:

npm install physical-quantity

Usage

For Web Visitors

The unit list displays available units for the physical quantity category. Users can easily switch between units to view the same quantity in different measurements.

When hovering over the unit list, an icon appears, providing access to a comprehensive Generic Unit Converter powered by AutoCalcs. This tool allows users to convert quantities across 60+ categories.

For Developers

After installation, you can import and use the physical-quantity component in your project.

Importing the Component

Include the following script tag in your HTML file:

<script src="node_modules/physical-quantity/dist/pq.es.js"></script>

Using the Component

Add the physical-quantity or uc-qty tag to your HTML file:

<physical-quantity value="25.4" unit="mm" decimal-places="4"></physical-quantity> 
<uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty> 
<uc-qty value="25.4" unit="mm" show-unit-arrow="false"></uc-qty> Compact mode, no arrow.<br>
<physical-quantity value="25.4" unit="mxm" decimal-places="2"></physical-quantity> Non-exist unit, shown as is.<br>
<physical-quantity value="25" unit="mm" decimal-places="2"></physical-quantity><br>
<physical-quantity value="25" unit="mm" decimal-places="3"></physical-quantity> 3 digits<br>
<physical-quantity value="25" unit="mm" decimal-places="4"></physical-quantity> 4 digits<br>
<physical-quantity value="25" unit="mm" decimal-places="5"></physical-quantity> 5 digits<br>
<physical-quantity value="1500" unit="g"></physical-quantity> <br>
<physical-quantity value="1500" unit="psf"></physical-quantity> <br>
<physical-quantity value="137.16" unit="cm"></physical-quantity>x
<physical-quantity value="137.16" unit="cm"></physical-quantity>x
<physical-quantity value="91.44" unit="cm"></physical-quantity><br>
<physical-quantity value="800" unit="kg/m³"></physical-quantity><br>
<physical-quantity value="800" unit="kg/m³" show-unit-arrow="false"></physical-quantity>Compact mode, no arrow.<br>
<uc-qty value="91" unit="cm"></uc-qty><br>
<uc-qty value="2" unit="minute"></uc-qty><br>
<uc-qty value="2" unit="A"></uc-qty> Default with arrow.<br>
<uc-qty value="2" unit="A" show-unit-arrow="false"></uc-qty>Compact mode, no arrow.<br>
<uc-qty value="37.778" unit="°C" show-unit-arrow="false"></uc-qty>Compact mode, no arrow.<br>
<uc-qty value="100" unit="°F"></uc-qty><br>
<uc-qty value="2'-3" unit="ft-in"></uc-qty>For Feet-Inches unit<br>
<physical-quantity value="2'-3 3/16" unit="ft-in" ></physical-quantity>
<physical-quantity value="2" unit="ft-in"></physical-quantity>
<physical-quantity value="2'-3" unit="ft-in" ></physical-quantity><br>
<physical-quantity value="10" unit="kgf" ></physical-quantity>
<physical-quantity value="10" unit="Volt" ></physical-quantity>

Above Rendered in Web Browser

Example - Linking the Code

Here's an example of how to use the component in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Physical Quantity Component Example</title>
</head>
<body>
  <physical-quantity value="25.4" unit="mm"></physical-quantity>
  <uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty> 

  <script src="node_modules/physical-quantity/src/pq.es.js"></script>
</body>
</html>

Example - HTML File Using CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Physical Quantity Component Example</title>
  <script src="https://unpkg.com/physical-quantity@latest/dist/pq.umd.js"></script>
</head>
<body>
  <physical-quantity value="25.4" unit="mm"></physical-quantity>
  <physical-quantity value="1500" unit="psf" decimal-places=4></physical-quantity> <br>
  <uc-qty value="2" unit="lbm" decimal-places="2"></uc-qty> 
  
</body>
</html>

Attributes

The physical-quantity component supports the following attributes:

value: The initial value of the physical quantity. It can be any number.
unit: The initial unit of the physical quantity.
When a valid unit within the supported unit categories (e.g., mm, cm, m, in, ft for length), unit conversion is automated;
When a unit provided is not in the library, it will show per the author's input, like a regular text input.
decimal-places: web author can specify the decimal-places depending on the magnitude of the quantity. Default to 2.
show-unit-arrow: specify to show the downward arrow following the units list. Default to be true. When set to false, it is suitable when the author wants to show in a compact format.

Supported Units

Currently, the component supports the following categories and units:

Category	Unit	Description
Length	m	meter
	km	kilometer
	mm	millimeter
	cm	centimeter
	in	inch
	ft-in	foot-inch
	ft	foot
Mass	kg	kilogram
	g	gram
	lbm	pound mass
Time	s[second]
	s
	minute
	h
	h[hour]
	day
	week
ElectricalCurrent	A
	Ampere[amp]
	mA
	µA
	kA
	MA
	esu/s
Temperature	°K
	°C
	°F
	°Ra
Amount of Substance	mol
	mmol
	kmol
Luminous Intensity	cd[candela]
	lm/sr
	cp[candlepower]
	cp[candlepower(before 1948)]
Acceleration	m/s²
	m/min²
	mm/s²
	ft/s²
	ft/min²
	in/s²
Gravitational Constant	m³/kg/s²
	N⋅m²/kg²
	dyn⋅cm²/g²
Velocity (Angular)	rad/s
	rad/min
	rad/h
	deg°/s
	deg°/min
	deg°/h
	rpm[rev/min]
	rev/s
Pressure/Stress	Pa
	kPa
	MPa
	GPa
	bar
	mbar
	atm
	mm HG
	cm HG
	in HG
	mm W.C.
	m W.C.
	in W.C.
	psf	pound per square foot
	psi	pound per square foot
	ksi	kilo-pound per square foot
	ksi[kip/in²]
Density	kg/m³
	kg/L
	g/cm³
	g/mm³
	lbm/ft³
	lbm/in³
Force	N
	kN
	MN
	kgf
	lb	pound weight
	lbf	pount force
	kip[kilo pounds]
Flow Rate (Volume)	m³/s
	m³/min
	m³/h
	L/s
	L/min
	L/h
	cm³/s
	cm³/min
	in³/s
	in³/min
	ft³/s
	CFM
	CFM[ft³/min]
	CFH
	CFH[ft³/h]
	yd³/min
	yd³/h
	gpm(US)	gallons(US) per minute
	gph(US)	gallons(US) per hour
	bushel(UK-imperial)/h
	bushel(US)/h
Electrical Potential Difference (Voltage)	V
	Volt
	joule/coulomb
	J/C
	µV
	mV
	kV
	M
more to update.	(feel free to send your request for other units & categories)

Note:

lbm, lbmass are used for mass units;
lb, lbf are used for weight/force units.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please contact the developer for any bugs, features, or improvements.

Change Log

Version	Date	Description
v1.1.70	20240810	Fine-tuned style. Checked usage of PQ element in Vue 3 app. Works with both unpkg and npm installation.
v1.1.68	20240722	Readme update with Technical Writing example.
v1.1.67	20240721	Number formatting with comma, eg: 20000 to 23,000; bug fixes.
v1.1.60	20240721	A main refactoring.
v1.1.52	20240718	Added category "Electrical Potential Difference (Voltage)".
v1.1.50	20240716	Corrected decimal point format, default to 2.
v1.1.47	20240712	Added flow rate (volume) category.
v1.1.46	20240629	Added more categories; add notes for mass/weight differences.
v1.1.43	20240623	Added more categories.
v1.1.41	20240620	Added Force category.
v1.1.40	20240619	Added ft-in (ie: Foot-Inch) in Length category.
v1.1.35	20240616	Added temperature category.
v1.1.30	20240615	Added "show-unit-arrow" prop to allow web author to create a compact UI; Unit width is now responsive to the chosen unit; Author can force init unit.
v1.1.28	20240610	Tooltip for unit list provides a link to the unit converter page for all unit categories. Added more categories.
v1.1.21	20240603	Added alias uc-qty.
v1.1.19	20240602	Changed to umd for unpkg, and es for module.

Contact

If you have any questions or feedback, feel free to contact me at don.wen@yahoo.com.
For more info, please visit:
AutoCalcs
AutoCalcs Docs and Library Demo

physical-quantity

Physical Quantity Web Component

Features

Demo: Physical Quantity element - No Unit Converter or Dual Units Needed

Installation

Usage

For Web Visitors

For Developers

Importing the Component

Using the Component

Example - Linking the Code

Example - HTML File Using CDN

Attributes

Supported Units

License

Contributing

Change Log

Contact

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

physical-quantity

Physical Quantity Web Component

Features

Demo: Physical Quantity element - No Unit Converter or Dual Units Needed

Installation

Usage

For Web Visitors

For Developers

Importing the Component

Using the Component

Example - Linking the Code

Example - HTML File Using CDN

Attributes

Supported Units

License

Contributing

Change Log

Contact

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads