strunit

ends a value with a unit

Do that?

const width = 100
document.querySelector('div').style.width = `${width}px`

Please, don't. Use strunit!

Usage

yarn add strunit

import { px } from 'strunit'

const width = 100
document.querySelector('div').style.width = px(width)

API

px(value: string | number): string

Pixels

px(42)                // => '42px'
px('69')              // => '69px'

pt(value: string | number): string

Points

pt(4.20)              // => '4.20pt'
pt('3.141592653')     // => '3.141592653pt'

pct(value: string | number): string

Percents

pct(7)                // => '7%'
pct('13')             // => '13%'

cm(value: string | number): string

Centimeters

cm(123)               // => '123cm'
cm('4815162342')      // => '4815162342cm'

mm(value: string | number): string

Millimeters

mm(2012)              // => '2012mm'
mm('88005553535')     // => '88005553535mm'

em(value: string | number): string

Font size of the parent element

em(666)               // => '666em'
em('911')             // => '911em'

rem(value: string | number): string

Font size of the root element

rem(21)               // => '21rem'
rem('777')            // => '777rem'

vw(value: string | number): string

1% of the viewport's width

vw(100)               // => '100vw'
vw('100')             // => '100vw'

vh(value: string | number): string

1% of the viewport's height

vh(100)               // => '100vh'
vh('100')             // => '100vh'

vmin(value: string | number): string

1% of the viewport's smaller dimension

vmin(1)               // => '1vmin'
vmin('1')             // => '1vmin'

vmax(value: string | number): string

1% of the viewport's larger dimension

vmax(99)              // => '99vmax'
vmax('99')            // => '99vmax'

inch(value: string | number): string

Inches

inch(9)               // => '9in'
inch('3.5')           // => '3.5in'

pc(value: string | number): string

Picas

pc(1881)              // => '1881pc'
pc('1973')            // => '1973pc'

Q(value: string | number): string

Quarter-millimeters

Q(3.79)               // => '3.79Q'
Q('4.79')             // => '4.79Q'

ex(value: string | number): string

X-height of the element's font

ex(1)                 // => '1ex'
ex('s')               // => 'sex'

ch(value: string | number): string

The advance measure (width) of the glyph "0" of the element's font

ch(0)                 // => '0ch'
ch('not')             // => 'notch'

custom(value: string | number, unit: string): string

custom(63, 'region')  // => '63region'
custom(43, '°C')      // => '43°C'