Home

Awesome

npm downloads CI

Update-Input-Width

A function that given an input element, updates its width to fit its content.

tl;dr

User guide

updateInputWidth(element: HTMLInputElement)

A function that given an input element, updates its width to fit its content by setting inline width CSS property.

Sample usage

import updateInputWidth from 'update-input-width';

updateInputWidth(myInput); // 42

or

import { updateInputWidth } from 'update-input-width';

updateInputWidth(myInput); // 42

getFontShorthand(element: HTMLElement)

A function that given HTML element returns font CSS shorthand property. Equal to Chrome-only code:

window.getComputedStyle(element).font;

Sample usage

import { getFontShorthand } from 'update-input-width';

getFontShorthand(myInput); // 'normal normal 600 normal 20px / 25px Arial, sans-serif'

measureText(text: string, font: string)

A function that given text and font CSS shorthand property returns text width in pixels.

Sample usage

import { measureText } from 'update-input-width';

measureText('hello', 'normal normal 600 normal 20px / 25px Arial, sans-serif'); // 42

License

The MIT License.

Author

<table> <tr> <td > <img src="https://avatars.githubusercontent.com/u/5426427?v=4&s=128" width="64" height="64" alt="Wojciech Maj"> </td> <td> <a href="https://github.com/wojtekmaj">Wojciech Maj</a> </td> </tr> </table>