Awesome
Update-Input-Width
A function that given an input element, updates its width to fit its content.
tl;dr
- Install by executing
npm install update-input-width
oryarn add update-input-width
. - Import by adding
import updateInputWidth from 'update-input-width'
. - Use it by calling it with input element as an argument.
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.